使用 jquery 选择和取消选择复选框

Question

见以下代码：

 $(document).ready(function() {
    
        $('.checkbox-group .parents-checkbox .panel-title input').click(function () {
        
            $(this).closest('.checkbox-group').find('input[type="checkbox"]').not(this).prop('checked', this.checked).closest('label');
        });
    
    });

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="panel panel-default item-box-roll checkbox-group">
        <div class="panel-heading parents-checkbox">
    		<h3 class="panel-title">
    			<input type="checkbox" name="rolls[]" id="selecctall" value="2" checked="">&nbsp;&nbsp;Items
    		</h3>
    	</div>
    	<div class="panel-body child-checkbox">
    	<input type="checkbox" class="checkbox1" name="rolls[]" value="20" checked="">&nbsp;&nbsp;Items management<br>
    	<input type="checkbox" class="checkbox1" name="rolls[]" value="21" checked="">&nbsp;&nbsp;Add item<br>
    	<input type="checkbox" class="checkbox1" name="rolls[]" value="22" checked="">&nbsp;&nbsp;Edit items<br>
     </div>
    </div>

当我点击第一个复选框时，选择子复选框 div 中的所有复选框。我想如果选中子复选框 div 中的每个复选框，然后检查第一个复选框！如何更改代码？

Answer 1

您需要监听子复选框并根据它们是否有没有未选中的框来设置父复选框。

JSFiddle：http://jsfiddle.net/TrueBlueAussie/annvy1ed/1/

$('.child-checkbox :checkbox').change(function(){
    $('.checkbox-group .parents-checkbox .panel-title :checkbox').prop('checked', $('.child-checkbox :checkbox').not(':checked').length == 0);
});

选择器都可以简化，但这将回答您的基本问题。

您可以将其缩短为：

$('.checkbox-group .parents-checkbox .panel-title :checkbox').prop('checked', !$('.child-checkbox :checkbox:not(:checked)').length);

http://jsfiddle.net/TrueBlueAussie/annvy1ed/3/

你可以把它缩短很多，例如如果您可以使用您的 ID 选择器，但您的代码表明您可能在页面上有多组复选框。

如果有多个组，您还需要在新代码中再次使用closest：

例如http://jsfiddle.net/TrueBlueAussie/annvy1ed/9/

$('.child-checkbox :checkbox').change(function(){
    var $group = $(this).closest('.checkbox-group');
    $group.find('.parents-checkbox .panel-title :checkbox').prop('checked', !$group.find('.child-checkbox :checkbox:not(:checked)').length);
});

注意事项：

• 您应该优先使用change 事件而不是click 复选框。
• 您可以为复选框使用:checkbox 伪选择器：http://jsfiddle.net/TrueBlueAussie/annvy1ed/2/

更新“任何”子节点：

如果选中任何个子框，如果要勾选父级，则反转逻辑：

http://jsfiddle.net/TrueBlueAussie/annvy1ed/5/

$('.child-checkbox input').change(function(){
    $('.checkbox-group .parents-checkbox .panel-title input').prop('checked', $('.child-checkbox input:checked').length);
});

或者，支持多个复选框组：

http://jsfiddle.net/TrueBlueAussie/annvy1ed/8/

$('.child-checkbox :checkbox').change(function(){
    var $group = $(this).closest('.checkbox-group');
    $group.find('.parents-checkbox .panel-title :checkbox').prop('checked', $group.find('.child-checkbox :checkbox:checked').length);
});

Answer 2

最简单的方法是检查长度

$(".checkbox1").change(function(){
    if ($('.checkbox1:checked').length == $('.checkbox1').length) {
       //check the parent checkbox
    }
};

Answer 3

提示：您应该在元素上使用数据属性来减少 JavaScript 的代码量和复杂性...

$(document).ready(function() {

  $('.checkbox-group .parents-checkbox .panel-title input').click(function() {

    $(this).closest('.checkbox-group').find('input[type="checkbox"]').not(this).prop('checked', this.checked).closest('label');
  });

  $('.checkbox-group .child-checkbox input').click(function() {
    var total = $('.checkbox-group .child-checkbox input').length;
    var checked = $('.checkbox-group .child-checkbox input:checked').length;

    $('.checkbox-group .parents-checkbox .panel-title input').prop('checked', (total === checked));
  });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="panel panel-default item-box-roll checkbox-group">
  <div class="panel-heading parents-checkbox">
    <h3 class="panel-title">
    			<input type="checkbox" name="rolls[]" id="selecctall" value="2" checked="">&nbsp;&nbsp;Items
    		</h3>
  </div>
  <div class="panel-body child-checkbox">
    <input type="checkbox" class="checkbox1" name="rolls[]" value="20" checked="">&nbsp;&nbsp;Items management
    <br>
    <input type="checkbox" class="checkbox1" name="rolls[]" value="21" checked="">&nbsp;&nbsp;Add item
    <br>
    <input type="checkbox" class="checkbox1" name="rolls[]" value="22" checked="">&nbsp;&nbsp;Edit items
    <br>
  </div>
</div>