计算选中的复选框数答案

【问题标题】：counting the number of checkboxes checked计算选中的复选框数
【发布时间】：2012-06-10 15:26:51
【问题描述】：

我有一些这样的 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 中所有相邻的复选框。基本上，我只希望在任何给定时间为每个 Wrapper 选择一个 SomeCheckboxClass。目前，我是这样写的：

$('#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 是在运行时生成的。让我知道是否有更容易/更好/更快的方法。

谢谢。

【问题讨论】：

您是否使用复选框作为单选按钮？

标签： jquery

【解决方案1】：

你可以使用siblings():

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

【讨论】：

【解决方案2】：

无需计数：

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

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

【讨论】：

【解决方案3】：

根据您的问题标题，以下内容将为您提供选中复选框的数量：

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

http://jsfiddle.net/d9KcH/

但是，正如@dunsmoreb 所建议的，您应该使用单选按钮列表来获得这种功能。

【讨论】：

【解决方案4】：

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

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

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

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

【讨论】：

因为我希望能够只选择一个，就像单选按钮一样，然后如果我想取消选择它。使用单选按钮，一旦您选择了一个，您就只能选择另一个，但不能全部取消选择。

【解决方案5】：

这是一个快速的尝试：

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

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

【讨论】：

【解决方案6】：

我喜欢将选择与检查复选框是否被选中的行为分开。我认为读起来更好：

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

【讨论】：

【解决方案7】：

尝试如下，

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

演示： http://jsfiddle.net/82QcL/3/

【讨论】：

【解决方案8】：

$('#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

【讨论】：