How to check radio buttons

Question

I have the following MySQL table:

|  id   |    Title    |  Windows | Linux | IDE | GUI | RAD |
------------------------------------------------------------
|   1   |  Software_1 |     1    |   0   |  1  |  0  |  0  |
------------------------------------------------------------
|   2   |  Software_2 |     0    |   1   |  0  |  1  |  0  |

I would like to populate a form by querying the mySQL db. Up to now I'm able to populate input fields, textareas and checkboxes but I'm absolutely stuck on populating radiobuttons. Please note that mySQL stores boolean values for: checkboxes (Windows, Linux) and radiobuttons (IDE, GUI, RAD)

This is the PHP part that retrieves the data from the dB and converts it to JSON:

while($review = mysql_fetch_array($qry)) {
    $arr = array('id_field' => $review['id'],
                'title' => $review['title'],
                'homepage' => $review['link_homepage'],
                'windows' => $review['Windows'] == "1",
                'linux' => $review['Linux'] == "1",
                'ide' => $review['IDE'] == "1",
                'gui' => $review['GUI'] == "1",
                'rad' => $review['RAD'] == "1"
    );
    echo json_encode($arr);
}

This is the form:

<form name="form" id="edit_review" method ="post" action="review.php">  
    Language name: <input type="text" size="34" value="" name="title"/>
    Windows <input type="checkbox" name="windows" />
    Linux <input type="checkbox" name="linux" />

    IDE <input type="radio" name="environment" id="ide" value="ide"/>
    GUI <input type="radio" name="environment" id="gui" value="gui"/>
    RAD <input type="radio" name="environment" id="rad" value="rad"/>
</form>

This is the jQuery code:

$(".editlink").click(function() {
    $.get("lists.php", {param2: $(this).attr('id')}, 
        function(data) {
            jsonOBJ = jQuery.parseJSON(data);
            for (var key in jsonOBJ) {
                $(":input[name='" + key + "']").val(jsonOBJ[key]);
                $(":input[name='" + key + "']").attr("checked", jsonOBJ[key]);
            }
        }   
    );    
    return false;
 });

The string:

$(":input[name='" + key + "']").attr("checked", jsonOBJ[key]);

works only for checkboxes. Radiobuttons 'name' is 'environment' and must be the same for all the three radiobuttons. So, of course the above line is not working. I tried changing it to:

$(":input[id='" + key + "']").attr("checked", jsonOBJ[key]);

and I added 'id' to the radiobuttons as follows:

IDE <input type="radio" name="environment" id="ide" value="ide"/>

and I noticed (using 'alert') that the correct checkbox is checked but as soon as the LOOP continues is immediately unchecked. Why radiobuttons are unchecked and checkboxes are not? How can I fix it?

What version of jquery are you using. This depends on whether you use .attr or .prop. Please see this answer for more info: http://stackoverflow.com/questions/977137/how-to-set-radiobutton-in-jquery — bsimic, Feb 17 '12 at 12:09
Oh my God! **SOLVED!** Two days spent on this! Thank you **bsimic** I changed .attr to .prop and it worked suddently. — Nicero, Feb 17 '12 at 12:39
Glad I could help. I'll add it as a "solution" so if you could put it as the answer perhaps it could help others who are searching someday! — bsimic, Feb 17 '12 at 14:12

RonnyKnoxville · Answer 1 · 2012-02-17T12:29:05.253

This is going to see seem like a silly suggestion, but have you grouped your radio buttons correctly?

If the radio buttons are unchecking themselves it may be because another radio button is being dealt with that is in the same group.

It looks as if you are trying to check all of the radio buttons from the same group, which is not possible. Only one can be checked.

If you want to check all of the options, you must use checkboxes or set the name attribute of each radio button to something different

Only one can be checked:

IDE <input type="radio" name="environment" id="ide" value="ide"/>
GUI <input type="radio" name="environment" id="ide" value="ide"/>
RAD <input type="radio" name="environment" id="ide" value="ide"/>

All can be checked (although defeats the point of radio buttons):

IDE <input type="radio" name="environment1" id="ide" value="ide"/>
GUI <input type="radio" name="environment2" id="ide" value="ide"/>
RAD <input type="radio" name="environment3" id="ide" value="ide"/>

It may also be that changing the checked attribute via jQuery (whether true or not) will deactivate the other radio buttons, so perhaps try using jQuery's find() to check the relevant radio button rather than looping over them.

Hi JackalopeZero, as you can see in my code above (the 'form' part), the three radiobuttons are grouped together correctly (they all have the same name) but each one has different ID and VALUE. — Nicero, Feb 17 '12 at 12:30

score 0 · Accepted Answer · edited May 23 '17 at 11:56

0

It depends on the version of jquery you are using. Please look at: How to reset radiobuttons in jQuery so that none is checked for your answer.

edited May 23 '17 at 11:56

Community

1
1

answered Feb 17 '12 at 14:13

bsimic

926
7
15

How to check radio buttons

2 Answers2

Linked