2

我有一些这样的 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 是在运行时生成的。让我知道是否有更容易/更好/更快的方法。

谢谢。

4

8 回答 8

4

您可以使用兄弟姐妹（）：

var $this = $(this);
if ($this.is(":checked")) {
    $this.siblings().prop("checked", false);
}
于 2012-06-06T15:20:14.643 回答
3

无需计数：

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

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

于 2012-06-06T15:20:38.190 回答
2

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

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

http://jsfiddle.net/d9KcH/

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

于 2012-06-06T15:19:26.660 回答
1

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

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

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

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

于 2012-06-06T15:19:46.270 回答
1

这是一个快速尝试：

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

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

于 2012-06-06T15:20:58.643 回答
1 
$('#SomeID').on({
   change: function() {
      if(this.checked){
         $(this).siblings(':checkbox').prop('checked', false);
      }
  }
}, '.SomeCheckboxClass');

演示 1

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

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

演示 2

于 2012-06-06T15:21:00.083 回答
1

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

$("input[type=checkbox]").is(":checked").length;
于 2012-06-06T15:21:32.847 回答
1

尝试如下，

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

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

于 2012-06-06T15:22:24.150 回答