Question

希望有人可以帮助解决这个问题。

我有一个广泛的复选框列表，其中包含一个我需要更智能（自动）的页面。

页面上的所有复选框都共享相同的“名称”属性，但它们确实有子分组。

我希望对此进行扩展，因此当在组内“检查”任何复选框时，会检查“父”，如果没有分组（在<ul></ul>内），则取消选中父级

我在这里设置了一个jsFiddle：http://jsfiddle.net/swdmedia/xsDgm/13/

的jQuery

$('input.checkbox').click(function() {
  var parent = $(this).attr('data-parent');

  $('#'+parent).attr('checked', true);
});

HTML

<h4>Agriculture <input type="checkbox" id="cat4" name="cntnt01cd_categories[]" value="4" /></h4>

<ul>
  <li>
    <label for="cat44" class="checkbox">
    <input type="checkbox" class="checkbox" id="cat44" name="cntnt01cd_categories[]" value="44" data-parent="cat4" />Farm Services</label>
</li>
  <li>
    <label for="cat40" class="checkbox">
    <input type="checkbox" class="checkbox" id="cat40" name="cntnt01cd_categories[]" value="40" data-parent="cat4" />Farming</label>
</li>
</ul>

<h4>Automotive Sales and Supplies <input type="checkbox" id="cat5" name="cntnt01cd_categories[]" value="5" /></h4> 

<ul>

  <li><label for="cat46" class="checkbox"><input type="checkbox" id="cat46" name="cntnt01cd_categories[]" value="46"/> Auto Service or Auto Repair</label></li>

  <li><label for="cat48" class="checkbox"><input type="checkbox" id="cat48" name="cntnt01cd_categories[]" value="48"/> Auto Glass</label></li>                                          
</ul>

Answer 1

使用prop()代替attr()和data()来获取HTML5数据归属

 $('input.checkbox').click(function() {
   var parent = $(this).data('parent');

   $('#'+parent).prop('checked', true);
});

已更新（我猜你也需要这个）

更新版本：如果检查了组内任何复选框，则选中父项，否则取消选中。

$('input.checkbox').click(function() {
   var parent = $(this).data('parent');
   var checked =false;
   $(this).parents('ul').find(':checkbox').each(function(){
     if(this.checked){
        checked = true;
        return;
     }
  });
 $('#'+parent).prop('checked', checked);
});

我发现你的小提琴中的第二组不起作用，因为你没有说明这个组的输入类和数据属性。是的，你可以用$(':checkbox')选择所有输入复选框，而不是给所有输入复选框元素和调用类选择器（更少的代码）。

fiddle

jquery复选框（选中/取消选中其他人是否已选中）

1 个答案: