jQuery radio buttons - choose only one?

Question

This is probably a stupidly simple question, but I'm stuck.

I had created a form with multiple checkboxes, and when the checkboxes were clicked, it would pass the values of each checkbox as a comma-separated list to a hidden input field. It worked a treat. but due to some issues, I now have to alter my code so that it uses radio buttons instead - so no comma-separated list of values, just one at a time.

I altered the code to swap it out to radio buttons, and it's working fine except for two things: 1) it's not switching between radio buttons (each time I select a button, it stays selected as I choose others) and 2) it's adding to the list instead of returning the single option selected. In other words, it's still acting like a checkbox, except visually, it's round and has a dot. LOL

This is my code thus far:

jQuery(document).ready(function($) {
        $(':radio').click(function() { 
          var radio = $(this);
          var text = $('input[name="cat"]');
          if(radio.is(':checked')) {
            text.val(text.val() + radio.val());
            //alert(text.val());
          } else {
            text.val(function() {  
                $(this).val().replace(radio.val(),"");
            });
          }
        });
    });

so when I uncomment that "alert" line, I can see what's passed, and it's just adding to the list instead of replacing with the new value. Anyone know how to fix the above so only one option can be selected and passed? (The above code works awesomely as a checkbox thing though. I actually think I got the above code from here somewhere, although I can't remember where!)

EDIT: here's the code that solved the issue and works a treat (thanks to you all :) ) - maybe it'll help someone else in the future.

`jQuery(document).ready(function($) {
        $(':radio').change(function() { 
          var radio = $(this);
          var text = $('input[name="cat"]');
          if(radio.is(':checked')) {
            text.val(radio.val());
            //alert(text.val());
          } else {
            text.val(function() {  
                $(this).val().replace(radio.val(),"");
            });
          }
        });
    });`

did you group the radio buttons ? give all the same name ... — Ciprian Grosu, Apr 27 '11 at 14:15
why are you checking if it's checked. radios are always checked on click. — ChrisThompson, Apr 27 '11 at 14:17
I tried it *without* checking, and it doesn't pass the values properly if it's not there. Don't know why - but then again I'm more of a WordPress/PHP person than a jQuery one :) — Shelly, Apr 27 '11 at 14:45

nickytonline · Answer 1 · 2011-09-08T02:02:50.020

4

Radio buttons have to have the same name attribute. The id attribute can be different, but the same name attribute is what allows you to only select one at a time.

edited Sep 08 '11 at 02:02

answered Apr 27 '11 at 14:15

nickytonline

6,747
6
40
75

I'm marking Naveed's answer as correct, but this one is too! (I can only pick one, though!) I *didn't* have a "name" set for the radio button, so this solved the problem of allowing it to choose more than one. But Naveed's solution kept the (slightly more important) issue of returning only one passed value. Thank you all so much for your help! I really appreciate it :) – Shelly Apr 27 '11 at 14:26

score 1 · Accepted Answer · answered Apr 27 '11 at 14:14

1

This is the simpler way to do the same thing: Assuming the radio group name = a

$("input[name='a']").change(function(){
    alert($(this).val());
});

For demo: http://jsfiddle.net/naveed_ahmad/AtrXw/

answered Apr 27 '11 at 14:14

Naveed Ahmad

3,086
1
13
17

score 0 · Answer 3 · edited May 23 '17 at 11:51

When you set the name html property same for all radios, then you can select only one. Following is an example that I used for setting the radio button and selecting the user selected value.

Reference

CODE

   <script type="text/template" id="cardTemplate">
    <TR class=Normal>
        <TD style="WIDTH: 275px" align=left>
                <SPAN> LIJO </SPAN>
        </TD>
        <TD>
            <label><input type="radio" name="defaultScanOption" id= "defaultScanOptionCase" value="Case" checked>Case</label>
            <label><input type="radio" name="defaultScanOption" id= "defaultScanOptionWorkLot" value="WorkLot">WorkLot</label>
            <label><input type="radio" name="defaultScanOption" id= "defaultScanOptionCutLot" value="CutLot">CutLot</label>
            <label><input type="radio" name="defaultScanOption" id= "defaultScanOptionMoonrock" value="Moonrock">Moonrock</label>
        </TD>
     </TR>
   </script>

 $(document).ready(function () 
 {

        //Add Scan Type radio buttons as a table row  
        var cardTemplate = $("#cardTemplate").html();        
        $('#tblPlantParameters tr:last').after(cardTemplate);

        //When Scan Type radio button selection change, set value in hidden field
        $('input[name=defaultScanOption]:radio').change(function()
        {
            var selectedOptionValue = $(this).val();
            alert(selectedOptionValue);
            $('#hidSelectedScanOption').val(selectedOptionValue);
        });     


        //Set the Scan Type radio button if it has a value other than default
        var existingDefaultScanType = document.getElementById('hidExistingScanOption').value;
        alert(existingDefaultScanType);
        if(existingDefaultScanType != null && existingDefaultScanType != "")
        {
            $("input[name=defaultScanOption][value="+existingDefaultScanType+"]").attr('checked', true);
        } 
 });

score 0 · Answer 4 · answered Apr 27 '11 at 14:15

Well, you're setting the value of the "text" element to its current value plus the value of the selected radio button. To get rid of the previous radio button value, you'll have to either remove it based on some pattern, or else stash the original value of the text input somewhere so you can reconstruct it.

If your radio buttons don't act like radio buttons, it's because you didn't give them all the same name. That's how radio buttons work: among those that share a name, at most one can be selected at any time.

score 0 · Answer 5 · answered Apr 27 '11 at 14:17

Your code cannot work with radio-boxes because it presumes that you click on a checkbox to uncheck it. In case of radio boxes, you don't have to click on a box to uncheck it, you simply select another radio-box, so the function that removes the value of the unchecked box from the hidden field is never called.

Of course you could modify your code to work with radio-boxes but I don' think this is necessary: It's the default behaviour of radio boxes to pass the value of the selected box to the server, so you don't have to copy its value to a hidden field.

score 0 · Answer 6 · answered Apr 27 '11 at 14:25

I think this is what you want:

jQuery(document).ready(function($) {
    $(':radio').click(function() { 
      var radio = $(this);
      var text = $('input[name="cat"]');
      removeRadioValues()
      text.val(text.val()+radio.val());
    });
});
function removeRadioValues(){
    var tf = $('input[name="cat"]');
    var text = tf.val()
    $(':radio').each(function(){
        text = text.replace($(this).val(),'');
    });
    tf.val(text);
}

jQuery radio buttons - choose only one?

6 Answers6

Linked