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中的所有复选框。我想如果选中child-checkbox div中的每个复选框，则先选中复选框！我该如何更改代码？

Answer 1

您需要收听子复选框并根据是否有 no unchecked box 设置父复选框。

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：

e.g。 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>

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

3 个答案: