使用JQuery在单独的div中选择多个复选框

Question

我有几个复选框分布在多个div中。在所有单独的div中，我有一个"全选"复选框。当那个复选框被选中时，我试图让所有其他被选中的与那个特殊的div相关的复选框，当你取消选择'select all'时，它取消选择其他的。

<div class="actions" id="actions" title="Actions">
<div>
<div><input type="checkbox" name="action" id="" class="" value="0" /> Select All</div><br />
<div><input type="checkbox" name="action" id="" class="" value="1" /> <?php echo $lang["actions"][1]; ?></div><br />
<div><input type="checkbox" name="action" id="" class="" value="2" /> <?php echo $lang["actions"][2]; ?></div><br />
<div><input type="checkbox" name="action" id="" class="" value="3" /> <?php echo $lang["actions"][3]; ?></div><br />
</div>
<div>
<div><input type="checkbox" name="action" id="" class="" value="26" />Select All</div><br />
<div><input type="checkbox" name="action" id="" class="" value="27" /> <?php echo $lang["actions"][27]; ?></div><br />
<div><input type="checkbox" name="action" id="" class="" value="28" /> <?php echo $lang["actions"][28]; ?></div><br />
<div><input type="checkbox" name="action" id="" class="" value="29" /> <?php echo $lang["actions"][29]; ?></div><br />
<div><input type="checkbox" name="action" id="" class="" value="30" /> <?php echo $lang["actions"][30]; ?></div><br />
<div><input type="checkbox" name="action" id="" class="" value="31" /> <?php echo $lang["actions"][31]; ?></div>
</div>
</div>

Answer 1

下面是一个例子

下次至少给我们展示一些代码，这样我们可以帮助你理解

$('.selectAll').on('click',function(){
let isSelected = $(this).is(':checked');
$(this).parents('.myDiv').find('input[type="checkbox"]').each(function(){
if( isSelected )
$(this).prop('checked',true);
else
$(this).prop('checked',false);
})
})

$('input:not(".selectAll")').on('click',function(){
let selectAllChecked =  $(this).parents('.myDiv').find('.selectAll')[0].checked;
let numberInput = $(this).parents('.myDiv').find('input').not('.selectAll').length;
let numberInputChecked = $(this).parents('.myDiv').find('input:checked').not('.selectAll').length;

if( selectAllChecked )
$(this).parents('.myDiv').find('.selectAll')[0].checked = false;

if( numberInput == numberInputChecked)
$(this).parents('.myDiv').find('.selectAll')[0].checked = true;

})

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="actions" id="actions" title="Actions">
<div class="myDiv">
<div><input type="checkbox" name="action" id="" class="selectAll" value="0" /> Select All</div><br />
<div><input type="checkbox" name="action" id="" class="" value="1" /> <?php echo $lang["actions"][1]; ?></div><br />
<div><input type="checkbox" name="action" id="" class="" value="2" /> <?php echo $lang["actions"][2]; ?></div><br />
<div><input type="checkbox" name="action" id="" class="" value="3" /> <?php echo $lang["actions"][3]; ?></div><br />
</div>
<div class="myDiv">
<div><input type="checkbox" name="action" id="" class="selectAll" value="26" />Select All</div><br />
<div><input type="checkbox" name="action" id="" class="" value="27" /> <?php echo $lang["actions"][27]; ?></div><br />
<div><input type="checkbox" name="action" id="" class="" value="28" /> <?php echo $lang["actions"][28]; ?></div><br />
<div><input type="checkbox" name="action" id="" class="" value="29" /> <?php echo $lang["actions"][29]; ?></div><br />
<div><input type="checkbox" name="action" id="" class="" value="30" /> <?php echo $lang["actions"][30]; ?></div><br />
<div><input type="checkbox" name="action" id="" class="" value="31" /> <?php echo $lang["actions"][31]; ?></div>
</div>
</div>