Выбор одной радиокнопки из нескольких строк переключателей с одним DIV

Question

У меня есть таблица с одним заголовком и неизвестным количеством строк (в зависимости от количества записей в моей базе данных). Каждая строка содержит набор из шести переключателей, в которых пользователь может выбрать статус записи в этой строке. Чтобы облегчить для пользователя, я хочу разместить шесть DIV в заголовке: когда пользователь нажимает на первый DIV, тогда в каждой строке выбирается первая радиобарабана. Таким образом, пользователю не нужно нажимать первую радиоблок в каждой строке. Он не должен быть DIV: кнопка, флажок или что-нибудь еще меня устраивает ..

То, что я придумал это:

$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>"; 

Это производит часть headerrow с DIV. Для получения TableRow, я создаю это для каждого идентификатора row->:

$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>"; 

Мой JQuery Я использую это:

$ (документ) .ready (функция() {

$("#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()) 
     } 
    }); 

});

Проблема заключается в именах двойного класса, которые я использовал: до тех пор, пока я использовал обычную радиокнопку, установленную только с одним классом, линия $('input:radio[class=mrsn5]').prop('checked', true); работала просто отлично. Но когда я попытался сделать это красивее, заменив переключатели на изображения (для которых мне нужен дополнительный класс «trerr» (не говоря уже о глупом имени)). Я изменил код на $('input:radio[class="trerr mrsn1"]').prop('checked', true);, и это не работает. Я пробовал это без двойных кавычек, и я попробовал его с $('#mrsn1').prop('checked', true);, но ни один из них, похоже, не работал.

У кого-нибудь есть идея, что я делаю неправильно?

обновление **

Вау, это было быстро ответов1 Thanx. Я просто упустил из виду, что я еще не обновил изображения с «пресеченных» переключателей, но это отдельный вопрос, который мне нужно решить!

Answer 1

Не используйте [class="someclass"] но точку, чтобы выбрать по классам:

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

Ссылка: class selector

Answer 2

Try:

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