应切图网一个前端切图项目中的需求，需要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);
}
})

标签：checkbox, 全选, 反选, 复选框全选