首页 > 代码库 > 全选与反选（dom与jquery比较）
全选与反选（dom与jquery比较）
<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>
声明：以上内容来自用户投稿及互联网公开渠道收集整理发布，本网站不拥有所有权，未作人工编辑处理，也不承担相关法律责任，若内容有误或涉及侵权可进行投诉： 投诉/举报 工作人员会在5个工作日内联系你，一经查实，本站将立刻删除涉嫌侵权内容。