javascript - 使用 JQuery 在单独的 div 中选择多个复选框
问题描述
我有几个复选框分布在多个 div 中。在所有单独的 div 中,我都有一个“全选”复选框。When that checkbox is selected, I am trying to get all the other ones to be selected related to that pertucular div, and when you deselect the 'select all' one, it deselects the others.
<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>
解决方案
这是一个例子
下次向我们展示至少最少的代码,以便我们帮助您理解
$('.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>
推荐阅读
- javascript - 使用 AJAX 的 HTML 表更新未呈现
- python - 如何在二维列表的项目中追加?
- javascript - 为什么 Object.assign() 拆分字符串并创建具有多个键的对象?
- mysql - 为什么Mysql决定在Order By子句中指定的列上使用索引而不存在于where子句中?
- php - 包含php文件的正确方法是什么
- azure - 带有错误代码的天蓝色实体框架问题未知错误:0x80070057
- javascript - 是否可以在 PostgreSQL 中使用 knex 返回()方法来返回操作表中的所有行
- javascript - Google Tracking function(i,s,o,g,r,a,m) 代码是如何工作的?
- java - 如何从多个单选组传递单选按钮值?如何解决返回第一个值?
- pandas - 使用 groupby.tail 后如何创建数据框