<html> <head> <title>全选或反选(dom)</title> <meta http-equiv="Content-Type" content="text/html;charset=utf-8"/> <script> var divCheckbox; function init(){ var allCheckbox = document.getElementById("allId"); allCheckbox.onclick = allOnClick; var reservseCheckbox = document.getElementById("reservseId"); reservseCheckbox.onclick = reservseOnClick; divCheckbox = document.getElementById("divId").getElementsByTagName("input"); } function allOnClick(){ for(var i = 0,len = divCheckbox.length;i < len;i ++){ divCheckbox[i].checked = this.checked; } } function reservseOnClick(){ for(var i = 0,len = divCheckbox.length;i < len;i ++){ divCheckbox[i].checked = !divCheckbox[i].checked; } } window.onload =init; </script> </head> <body> <input id="allId" type="checkbox" />全选 <input id="reservseId" type="checkbox" />反选 <div id="divId"> <input type="checkbox" />足球 <input type="checkbox" />乒乓球 <input type="checkbox" />羽毛球 <input type="checkbox" />网球 <input type="checkbox" />棒球 <input type="checkbox" />篮球 <input type="checkbox" />全选 </div> </body> </html>
<html> <head> <title>全选或反选(jQuery)</title> <meta http-equiv="Content-Type" content="text/html;charset=utf-8"/> <script src="http://code.jquery.com/jquery-1.10.2.js"></script> <script> $(function(){ var $divCheckbox = $('#divId > input'); var $allCheckbox = $('#allId'); $allCheckbox.click(function(){ //这里不要使用attr，因为jQuery在1.6之后attr就某些时候不能够工作了。 //若使用attr，则在第一次可以看见效果，之后都无效！ $divCheckbox.prop("checked",this.checked); }); var $reservseCheckbox = $('#reservseId'); $reservseCheckbox.click(function(){ $divCheckbox.each(function(index,element){ element.checked = !element.checked; }); }); }); </script> </head> <body> <input id="allId" type="checkbox" />全选 <input id="reservseId" type="checkbox" />反选 <div id="divId"> <input type="checkbox" />足球 <input type="checkbox" />乒乓球 <input type="checkbox" />羽毛球 <input type="checkbox" />网球 <input type="checkbox" />棒球 <input type="checkbox" />篮球 <input type="checkbox" />全选 </div> </body> </html>