Question

我有一些像这样的HTML：

<div id="SomeID">
 <div class="Wrapper">
    <input type="checkbox" class="SomeCheckboxClass">
    <input type="checkbox" class="SomeCheckboxClass">
    <input type="checkbox" class="SomeCheckboxClass">
 </div>

 <div class="Wrapper">
    <input type="checkbox" class="SomeCheckboxClass">
    <input type="checkbox" class="SomeCheckboxClass">
    <input type="checkbox" class="SomeCheckboxClass">
 </div>
</div>

当用户点击复选框时，我想清除父Wrapper div中的所有相邻复选框。基本上，我只想在任何给定时间选择一个SomeCheckboxClass每个Wrapper。现在，我写了这个：

$('#SomeID').on({

   change: function () {

        if ($(this).attr('checked') === 'checked') {

        var TheIndex = $(this).index();

        $(this).parent().find('.SomeCheckboxClass').each(function () {

            if ($(this).index() !== TheIndex) {
                $(this).attr('checked', false);
            }
        });
      }
   }
}, '.SomeCheckboxClass');

有更简单的方法吗？花了一些时间做这件事之后，我认为必须有一个更简单的方法。请注意，HTML是在运行时生成的。让我知道是否更容易/更好/更快。

感谢。

Answer 1

您可以使用siblings()：

var $this = $(this);
if ($this.is(":checked")) {
    $this.siblings().prop("checked", false);
}

Answer 2

无需计算：

$(":checkbox").on("change", function(){
    this.checked && $(this).siblings().prop("checked", false); 
});

小提琴：http://jsfiddle.net/jonathansampson/82QcL/2/

Answer 3

以下将为您提供所选复选框的计数，正如您的问题标题所示：

$("#SomeID .Wrapper input.SomeCheckboxClass:checked").length

http://jsfiddle.net/d9KcH/

但是，正如@dunsmoreb建议的那样，您应该使用单选按钮列表来获得此类功能。

Answer 4

您似乎正在尝试复制单选按钮的功能。单选按钮仅允许一次检查一个值。这是一个例子。

<input type="radio" name="group1" value="Hello">
<input type="radio" name="group1" value="Hey">
<input type="radio" name="group1" value="Yo">

您只能为每个组选择一个按钮，该按钮在名称中指定。

注意：如果您希望单选按钮看起来像复选框，那么this answer会有所帮助。

Answer 5

这是一个快速尝试：

if($(this).is(':checked')) {
  $(this).parent().find('.SomeCheckboxClass').not(this).attr('checked', false);
}

您可能需要稍微调整一下。

Answer 6

$('#SomeID').on({
   change: function() {
      if(this.checked){
         $(this).siblings(':checkbox').prop('checked', false);
      }
  }
}, '.SomeCheckboxClass');

<强> DEMO 1

但是如果你想取消选中所有复选框，那么

$('#SomeID').on({
   change: function() {
       $('.SomeCheckboxClass:checkbox').not(this).prop('checked', false);
  }
}, '.SomeCheckboxClass');

<强> DEMO 2

Answer 7

我喜欢将选择与检查选中复选框的行为分开。我认为读得更好：

$("input[type=checkbox]").is(":checked").length;

Answer 8

尝试如下，

$('#SomeID').on({
   change: function () {
      if (this.checked) {
        $(this)              
          .siblings('.SomeCheckboxClass')
          .prop('checked', false);
      }
   }
}, '.SomeCheckboxClass');

DEMO： http://jsfiddle.net/82QcL/3/

计算选中的复选框数量

8 个答案: