CODEWITHSUNDEEP
jqueryhtml
Ad123
Ad123

Reputation: 37

Selecting one radio button from multiple rows of radio buttons with one DIV

I have a table with one headerrow and an unknown number of rows (depending on the numbes of records in my database). Each row contains a set of six radio buttons, where the user can select a status for the record on that row. To make it easier for the user I want to put six DIV's in the headerrow: when a user clicks on the first DIV then on every row the first radiobutton is selected. This way the user doesn't have to click the first radiobutton in every row. It doesn't have to be a DIV: a button, checkbox or anything else is fine by me..

What I have come up with is this:

$table = "<th ><span id=\"rsn1\" title=\"For info\" align=\"center\">[1]</span></th>"
    . "<th ><span id=\"rsn2\" title=\"For comment\">[2]</span></th>"
    . "<th ><span id=\"rsn3\" title=\"For approval\">[3]</span></th>"
    . "<th ><span id=\"rsn4\" title=\"For discussion\">[4]</span></th>"
    . "<th ><span id=\"rsn5\" title=\"For archive\">[5]</span></th>"
    . "<th ><span id=\"rsn6\" title=\"As built\">[6]</span></th>";

That produces the part of the headerrow with the DIVs. To produce the tablerow, I create this for each row->id:

$table .= "<td ><div class=\"radio image\"><input type=\"radio\" class=\"trerr mrsn1\" name=\"revRsn|".$result->id."\" value=\"yes\" /></td>"
    .   "<td><input type=\"radio\" class=\"trerr mrsn2\" name=\"revRsn|".$result->id."\" value=\"no\" /></td>"
    .   "<td><input type=\"radio\" class=\"trerr mrsn3\" name=\"revRsn|".$result->id."\" value=\"dunno\" /></td>"
    .   "<td><input type=\"radio\" class=\"trerr mrsn4\" name=\"revRsn|".$result->id."\" value=\"no\" /></td>"
    .   "<td><input type=\"radio\" class=\"trerr mrsn5\" name=\"revRsn|".$result->id."\" value=\"yhgfes\" /></td>"
    .   "<td><input type=\"radio\" class=\"trerr mrsn6\" name=\"revRsn|".$result->id."\" value=\"nfo\" /></div></td>";

My jquery I use is this:

$(document).ready(function(){

$("#rsn1")
    .css("cursor", "pointer")
    //.click(function(){ $('.mrsn1').prop('checked', true); }
    //.click(function(){alert("OK");})
    .click(function(){  $('input:radio[class="trerr mrsn1"]').prop('checked', true); }
        //alert("OK");
        //$('.mrsn1').attr('checked', true);
        //$('.mrsn1]').prop('checked', true); 
    );

$("#rsn2")
    .css("cursor", "pointer")
    .click(function(){ $('input:radio[class=mrsn2]').prop('checked', true); }
);

$("#rsn3")
    .css("cursor", "pointer")
    .click(function(){ $('input:radio[class=mrsn3]').prop('checked', true); }
);

$("#rsn4")
    .css("cursor", "pointer")
    .click(function(){ $('input:radio[class=mrsn4]').prop('checked', true); }
);

$("#rsn5")
    .css("cursor", "pointer")
    .click(function(){ $('input:radio[class=mrsn5]').prop('checked', true); }
);

$("#rsn6")
    .css("cursor", "pointer")
    .click(function(){ $('input:radio[class=mrsn6]').prop('checked', true); }
);

$('.trerr')
    .transformRadio({
        checked : "img/chk_on.png",     // Checked image to show
        unchecked : "img/chk_off.png",  // Unchecked image to show
        changeHandler: function (is_checked) { 

            // This is where the radio updates the reason

            alert($(this).val())
        }
    });

});

The problem lies in the double class names I used: as long as I used a normal radio button set with only a single class the line $('input:radio[class=mrsn5]').prop('checked', true); worked just fine. But when I tried to make it prettier by replacing the radio buttons by images (for wich I need the extra class "trerr" (never mind the silly name)) I changed the code into $('input:radio[class="trerr mrsn1"]').prop('checked', true);and that doesn't work somehow. I have tried it without the double quotes and I tried it with $('#mrsn1').prop('checked', true); but neither of them seemed to work.

Does anyone have an idea what I'm doing wrong?

update **

Wow, that were fast replies1 thanx. I just overlooked that I haven't yet refreshed the images from the 'prettified' radio buttons, but that's a separate issue I need to resolve!

Upvotes: 0

Views: 1609

Answers (2)

Kiran
Kiran

Reputation: 20313

Try:

$('input.trerr.mrsn1:radio').prop('checked', true);

Upvotes: 1

Denys S&#233;guret
Denys S&#233;guret

Reputation: 382092

Don't use [class="someclass"] but a dot to select by class :

$('input.trerr.mrsn1:radio').prop('checked', true);

Reference : class selector

Upvotes: 2

Related Questions