2023年8月9日

简单的checkbox全选反选代码示例 原创 亲测有用


应切图网一个前端切图项目中的需求,需要checkbox复选框全选反选,这个效果比较常见,这个效果说复杂不复杂 说简单不简单,市面上有一些不错的全选插件,用插件吧 又不至于,不用插件吧就需要自己写,比较尴尬,最终还是写了一个,几乎是最简单的代码了,没有一句代码是多余的,而且需要考虑几个地方,一个是点击全选的复选框以后,如果再点击取消一个子复选框的话,那么全选的复选框也应该要取消,反之同理。

HTML代码


<table class="n-table">
<tr>
<td>

<label>
<div class="n-check">
<input type="checkbox" name="qwhd" value="" class="qxall">
<i></i>
</div>
</label>

</td>
<td>审核项目</td>
</tr>
<tr>
<td>
<label>
<div class="n-check">
<input type="checkbox" name="qwhd" value="" class="qxitem" >
<i></i>
</div>
</label>
</td>
<td>《风险核查工作情况报告》</td>
</tr>
<tr>
<td>
<label>
<div class="n-check">
<input type="checkbox" name="qwhd" value="" class="qxitem" >
<i></i>
</div>
</label>
</td>
<td>《风险核查工作情况报告》</td>
</tr>
<tr>
<td>
<label>
<div class="n-check">
<input type="checkbox" name="qwhd" value="" class="qxitem">
<i></i>
</div>
</label>
</td>
<td>《风险核查工作情况报告》</td>
</tr>
<tr>
<td>
<label>
<div class="n-check">
<input type="checkbox" name="qwhd" value="" class="qxitem">
<i></i>
</div>
</label>
</td>
<td>《风险核查工作情况报告》</td>
</tr>
</table>

JS代码


//全选
$('.qxall').change(function () {
if ($(this).is(":checked")) {
$('.qxitem').each(function(){
$(this).prop("checked", true);
})
}
else {
$('.qxitem').each(function(){
$(this).prop("checked", false);
})
}
})
$('.qxitem').change(function () {
if ($(this).is(":checked")) {
if($('.qxitem:checked').size() == $('.qxitem').size()){
$('.qxall').prop("checked", true);
}
}
else {
$('.qxall').prop("checked", false);
}
})

标签:, , ,

微信扫一扫二维码访问


16年前端经验
加微信好友直接沟通
了解《我的十年》