JQuery写法
1 <!DOCTYPE html> 2 <html lang="en"> 3 4 <head> 5 <meta charset="UTF-8" /> 6 <meta name="viewport" content="width=device-width, initial-scale=1.0" /> 7 <meta http-equiv="X-UA-Compatible" content="ie=edge" /> 8 <title>Document</title> 9 </head> 10 11 <body> 12 <input type="checkbox" /> 13 <ul> 14 <li> 15 <input type="checkbox" /> 16 </li> 17 <li> 18 <input type="checkbox" /> 19 </li> 20 <li> 21 <input type="checkbox" /> 22 </li> 23 </ul> 24 <script src="jquery.js"></script> 25 <script> 26 $(function() { 27 $("input:first").click(function() { 28 $("li input").prop("checked", $(this).prop("checked")); 29 }); //prop用于获取设置checked属性 30 $("li input").click(function() { 31 if ($("li input:checked").length === $("li input").length) { 32 $("input:first").prop("checked", true); 33 } else { 34 $("input:first").prop("checked", false); 35 } 36 }); 37 }); 38 </script> 39 </body> 40 41 </html>