Question

我有一个包含一个headerrow和一个未知行数的表（取决于我数据库中记录的数量）。每行包含一组六个单选按钮，用户可以在其中选择该行上记录的状态。为了方便用户，我想在页眉中放置六个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>";

使用DIV生成headerrow的一部分。为了生成tablerow，我为每一行创建了这个 - ＆gt; 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>";

我使用的jquery是：

（文档）$。就绪（函数（）{

$("#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而不是x。我只是忽略了我还没有从'美化'单选按钮刷新图像，但这是一个我需要解决的单独问题！

Answer 1

请勿使用[class="someclass"]，而是使用点来按类选择：

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

参考：class selector

Answer 2

尝试：

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

使用一个DIV从多行单选按钮中选择一个单选按钮

2 个答案: