<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>jQuery</title> <style> </style> </head> <body> 选择喜欢的运动<input type="checkbox">全选 <br/> <input type="checkbox" class="item">篮球 <input type="checkbox" class="item">足球 <input type="checkbox" class="item">羽毛球 <input type="checkbox" class="item">冰棒球 <br/> <button id="selectAll">全选</button> <button id="notSelect">全不选</button> <button id="reverseSelect">反选</button> <script src="../js/vendor/jquery-3.2.1.min.js"></script> <script> var $lis=$("[type=checkbox]:first") var $items=$(".item"); $("#selectAll").click(function(){ $items.prop("checked",true); $lis.prop("checked",true); }); $("#notSelect").click(function(){ $items.prop("checked",false); $lis.prop("checked",false); }); $("#reverseSelect").click(function(){ $items.each(function(){ this.checked=!this.checked; }); $lis.prop("checked",$items.not(":checked").length===0) }); $lis.click(function(){ $items.prop("checked",this.checked); }) $items.click(function(){ $lis.prop("checked",$items.not(":checked").length===0) }) </script> </body> </html>
如对本文有疑问, 点击进行留言回复!!
网友评论