0

我有一个带有一个标题行和未知行数的表（取决于我的数据库中的记录数）。每行包含一组六个单选按钮，用户可以在其中选择该行记录的状态。为了使用户更容易，我想在标题行中放置六个 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 的标题行的一部分。为了生成 tablerow，我为每个 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>";

我使用的 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);但它们似乎都不起作用。

有谁知道我做错了什么？

更新 **

哇，那是快速回复1thanx。我只是忽略了我还没有从“美化”单选按钮刷新图像，但这是我需要解决的另一个问题！

4

2 回答 2

2

不要使用[class="someclass"]点来按类选择：

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

参考：类选择器

于 2013-09-11T18:20:07.170 回答
1

尝试：

$('input.trerr.mrsn1:radio').prop('checked', true);
于 2013-09-11T18:21:10.863 回答