應(yīng)切圖網(wǎng)一個前端切圖項目中的需求，需要checkbox復(fù)選框全選反選，這個效果比較常見，這個效果說復(fù)雜不復(fù)雜 說簡單不簡單，市面上有一些不錯的全選插件，用插件吧 又不至于，不用插件吧就需要自己寫，比較尷尬，最終還是寫了一個，幾乎是最簡單的代碼了，沒有一句代碼是多余的，而且需要考慮幾個地方，一個是點擊全選的復(fù)選框以后，如果再點擊取消一個子復(fù)選框的話，那么全選的復(fù)選框也應(yīng)該要取消，反之同理。

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>《風(fēng)險核查工作情況報告》</td></tr><tr><td><label><div class="n-check"><input type="checkbox" name="qwhd" value="" class="qxitem" ><i></i></div></label></td><td>《風(fēng)險核查工作情況報告》</td></tr><tr><td><label><div class="n-check"><input type="checkbox" name="qwhd" value="" class="qxitem"><i></i></div></label></td><td>《風(fēng)險核查工作情況報告》</td></tr><tr><td><label><div class="n-check"><input type="checkbox" name="qwhd" value="" class="qxitem"><i></i></div></label></td><td>《風(fēng)險核查工作情況報告》</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);}})