Question

我正在开发一个移动应用程序，我在jQuery中有一个click函数，它将一个类应用于一组单选按钮，并从页面上的其他单选按钮中删除该类。我现在有一个用例，我有两组单选按钮，现在它除去了所有单选按钮，而不仅仅是当前集中的单选按钮。

我已经在JSFiddle上设置了一个演示，它有两组单选按钮，你可以看到它们似乎以某种方式附加，我想让它们包容。希望如果您有任何问题，请随时提出。

这是jQuery代码，请查看JSFiddle上的其余部分。

$('.form-radios label').attr('checked', 'unchecked');

$(".form-radios label").click(function(){
       $(this).attr('checked', 'checked').addClass('checked');
       $('label').not(this).removeClass('checked');
});

Answer 1

找到最近的父元素，而不是到处搜索：

$('.form-radios label').click(function() {
       var $this = $(this);

       $this.next('input').prop('checked', 'checked'); // Took the liberty of fixing this up, too.
       $this.addClass('checked');
       $this.closest('.form-radios').find('label').not(this).removeClass('checked');
});

Answer 2

$(".form-radios label").click(function(){
       $(this).attr('checked', 'checked').addClass('checked')
              .siblings('label').removeClass('checked');
});

siblings将只获得共享相同父元素的元素。

http://jsfiddle.net/qxV9c/2/

编辑：使用新结构：

$(".form-radios label").click(function(){
    var $this = $(this);

    $this.closest(".form-radios").find("label").removeClass('checked');
    $this.attr('checked', 'checked').addClass('checked');
});

http://jsfiddle.net/qxV9c/5/

使用已选中和未选中的属性处理2组单选按钮

2 个答案: