<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>
全选与反选（dom与jquery比较）
时间： 2024-10-01 07:18:49