Question

我有一个包含许多radiobuttons组的表格，如下所示：

<form blah-blah-blah>
    <input type="radio" id="id1_1" name="nam1" value="" class="rad">
      <label for="id1_1" class="kf">label1_1</label>
    <input type="radio" id="id1_2" name="nam1" value="" class="rad">
      <label for="id1_2" class="kf">label1_2</label>
    <input type="radio" id="id1_3" name="nam1" value="" class="rad">
      <label for="id1_3" class="kf">label1_3</label>
    <input type="radio" id="id2_1" name="nam2" value="" class="rad">
      <label for="id2_1" class="kf">label2_1</label>
    <input type="radio" id="id2_2" name="nam2" value="" class="rad">
      <label for="id2_2" class="kf">label2_2</label>
    <input type="radio" id="id2_3" name="nam2" value="" class="rad">
      <label for="id2_3" class="kf">label2_3</label>
</form>

我使用CSS来改变收音机的风格。

.rad {display:none;}
.kf {padding:2px; background-color:#eaeaea; border:1px solid #dadada; cursor:pointer;}
.kf:hover, .sel {background-color:#3a608e; color:#fff;}

最后，我使用jQuery来实现它，但事实并非如此。点击标签即可收听广播。

    $(document).ready(function(){
        $(".rad").change(function(){
            if($(this).is(':checked')){      
                $(this).next("label").addClass("sel");
            }else{
                $(this).next("label").removeClass("sel");
            };
        });
    });

如果检查无线电，标签必须改变颜色。如果无线电丢失'已检查'状态标签必须将颜色更改为'未选中'。

出了什么问题（不要忘记几组无线电）？

编辑更新：我把两个答案结合到最优雅的解决方案=）

$(document).ready(function(){
    $(".rad").change(function(){
        var chk_name = $(this).attr("name");
        if($(this).is(':checked')){
            $(this).parents().find('input[name="'+chk_name+'"]').each(function(){
                $(this).next('label').removeClass('sel');
            });
            $(this).next("label").addClass("sel");
        };
    });
});

谢谢！

Answer 1

以下应该工作

 $(document).ready(function(){
 var $chk=null;
    $(".rad").change(function(e){
        if($(this).is(':checked')){
            if($chk) $chk.next("label").removeClass("sel");
            $(this).next("label").addClass("sel");
            $chk=$(this);
        }else{
            $(this).next("label").removeClass("sel");
        };
    });
});

Answer 2

试试这个：

$(document).ready(function(){
    $(".kf").click(function() {
        var chk = $(this).prev("input");
        var chk_name = $(chk).attr("name");
        if (!$(chk).is(':checked')) {
            $(this).parent().find('input[name="' + chk_name + '"]').each(function () {
                $(this).removeAttr("checked");
                $(this).next('label').removeClass('sel');
            });
            $(chk).attr("checked", "checked");
            $(this).addClass('sel');
        } else {
            $(chk).removeAttr("checked");
            $(this).removeClass('sel');
        }
    });
});

一个工作示例here

使用CSS和jQuery分组的单选按钮的样式化

2 个答案: