0

我有一个包含许多单选按钮组的表单，如下所示：

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

谢谢！

4

2 回答 2

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");
        };
    });
});​
于 2012-04-17T13:15:22.460 回答
1

试试这个：

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

这里是一个工作示例

于 2012-04-17T13:25:15.620 回答