1 <!doctype html> 2 <html lang="zh-cn"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>Document</title> 6 <script type="text/javascript" src="jquery.min.js"></script> 7 </head> 8 <body> 9 <input type="checkbox" id="checkbox1"><label for="checkbox1">库里</label><br> 10 <input type="checkbox" id="checkbox2"><label for="checkbox2">科比</label><br> 11 <input type="checkbox" id="checkbox3"><label for="checkbox3">麦迪</label><br> 12 <input type="checkbox" id="checkbox4"><label for="checkbox4">邓肯</label><br> 13 <input type="checkbox" id="checkbox5"><label for="checkbox5">奥尼尔</label><br><br> 14 <button>全选</button><button>全不选</button><button>反选</button> 15 </body> 16 </html> 17 <script type="text/javascript"> 18 $(function(){ 19 //匹配第一个button 20 $(':button:eq(0)').click(function(){ 21 //全部选中 checked=true,在前台就是表示选中 22 $(':checkbox').attr('checked',true); 23 }); 24 //匹配第二个button 25 $(':button:eq(1)').click(function(){ 26 //全部取消 checked=false,在前台就是表示未选中 27 $(':checkbox').attr('checked',false); 28 }); 29 //匹配第三个button 30 $(':button:eq(2)').click(function(){ 31 //查找每一个复选框，然后取相反 32 $(':checkbox').each(function(){ 33 $(this).attr('checked',!$(this).attr('checked')); 34 }); 35 }); 36 }) 37 </script>