简单的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);}})