3

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

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

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

我正在寻找扩展它，所以当一个组中的任何复选框被“选中”时，“父级”被选中，如果没有任何分组（在 内<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>
4

1 回答 1

2

使用prop()代替attr()anddata()来获取 HTML5 数据属性

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

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

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

updated version : if any of the checkbox inside a group is checked parent is checked else unchecked.

$('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);
});

i figured out your second group in the fiddle is not working since you haven't stated the input class and data attribute for this group . and yes you can select all input checkbox with $(':checkbox') rather than giving class to all the input checkbox element and calling class selector(less code) .

fiddle

于 2013-07-15T18:23:43.913 回答