全选全不选
界面：
代码：
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <script type="text/javascript" src="jquery-3.3.1.js"></script> </head> <body> <input type="checkbox" id="checkall" />全选/全不选 <br/> <input type="checkbox" name="items" value="足球"/>足球 <input type="checkbox" name="items" value="篮球" />篮球 <input type="checkbox" name="items" value="游泳" />游泳 <input type="checkbox" name="items" value="唱歌" />唱歌 <input type="checkbox" name="items" value="读书" />读书 <br/> <input type="button" id="checkall_1" value="全选"/> <input type="button" id="checkno" value="全不选"/> <input type="button" id="checkarev" value="反选"/> <input type="button" id="send" value="提交"/> <script type="text/javascript"> //全选全不选 $(document).ready(function(){ $("#checkall").click(function(){ if (($("#checkall").prop("checked"))){ $(":input[name='items']").attr("checked",true); }else{ $(":input[name='items']").attr("checked",false); } }); }); //全选 $(document).ready(function(){ $("#checkall_1").click(function(){ $(":input[name='items']").attr("checked",true); }); }); //全不选 $(document).ready(function(){ $("#checkno").click(function(){ //方式一 $(":input[name='items']").attr("checked",false); //方式二 // $("input[name='checkbox']").removeAttr("checked"); }); }); //反选 $(document).ready(function(){ $("#checkarev").click(function(){ $("input[name='items']").each(function(){ //attr //1.attr("checked"):返回被选中元素的属性值 //2.attr("checked",true)：设置选中属性 if (this.checked) { $(this).prop("checked",false); }else{ $(this).prop("checked",true); } }); }); }); </script> </body> </html>