在项目中经常遇到列表中对复选框进行勾选操作，全选。。。反选。。
2. example
<html> <body> <form id="test-form" action="test"> <legend>请选择想要学习的编程语言：</legend> <fieldset> <p><label class="selectall"><input type="checkbox"> <span class="selectall">全选</span><span class="deselectall">全不选</span></label> <a href="#0" class="invertselect">反选</a></p> <p><label><input type="checkbox" name="lang" value="javascript"> javascript</label></p> <p><label><input type="checkbox" name="lang" value="python"> python</label></p> <p><label><input type="checkbox" name="lang" value="ruby"> ruby</label></p> <p><label><input type="checkbox" name="lang" value="haskell"> haskell</label></p> <p><label><input type="checkbox" name="lang" value="scheme"> scheme</label></p> <p><button type="submit">submit</button></p> </fieldset> </form> <script src="jquery-3.1.0.js"></script> <script type="text/javascript"> $(function(){ (function(){ var form = $('#test-form'), langs = form.find('[name=lang]'), selectall = form.find('label.selectall :checkbox'), selectalllabel = form.find('label.selectall span.selectall'), deselectalllabel = form.find('label.selectall span.deselectall'), invertselect = form.find('a.invertselect'); // 重置初始化状态: form.find('*').show().off(); form.find(':checkbox').prop('checked', false).off(); deselectalllabel.hide(); // 拦截form提交事件: form.off().submit(function (e) { e.preventdefault(); alert(form.serialize()); }); var count = 1; //点击全选/全不选框次数 selectall.click(function(){ if(count++ %2){ selectalllabel.hide(); deselectalllabel.show(); $(this).prop("checked", false); langs.prop("checked", true); }else { selectalllabel.show(); deselectalllabel.hide(); $(this).prop("checked", false); langs.prop("checked", false); } }); invertselect.on('click', function(){ langs.map(function(){ $(this).prop('checked', !this.checked); }); }); })(); }); </script> </body> </html>
以上就是jquery中实现全选，反选实例代码 （推荐）的详细内容。