使用CSS和jQuery对组中的单选按钮进行样式化

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

<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>

最后，我使用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(){
 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");
        };
    });
});​

试试这个：

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

---

工作示例

不起作用。是的，现在标签丢失了“选定”状态，但所有标签都丢失了，而不仅仅是当前收音机组中的标签。我是说。。在您的示例中，整个表单上可能只选择了一个标签。我已经将最优雅的解决方案=）$（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'）；}；；}）；不。一组收音机中只能选择一个项目。i、 这个表格上有两个元素。再次检查我的例子。格雷廷斯！现在这就是我需要的！非常感谢。我已经将最优雅的解决方案=）$（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”）；}；}；；}）；

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

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