代码如下
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>checkbox练习</title>
</head>
<body>
<form method="post" action="">
你爱好的运动是？<input type="checkbox" id="checkedAllBox" />全选/全不选
<br />
<input type="checkbox" name="items" value="足球" />足球
<input type="checkbox" name="items" value="篮球" />篮球
<input type="checkbox" name="items" value="羽毛球" />羽毛球
<input type="checkbox" name="items" value="乒乓球" />乒乓球
<br />
<input type="button" id="checkedAllBtn" value="全 选" />
<input type="button" id="checkedNoBtn" value="全不选" />
<input type="button" id="checkedRevBtn" value="反 选" />
</form>
<script>
var checkedAllBtn = document.getElementById("checkedAllBtn")
var items = document.getElementsByName("items")
var checkedAllBox = document.getElementById("checkedAllBox")
//全选
checkedAllBtn.onclick = function () {
for (var i = 0; i < items.length;i++){
items[i].checked = true
}
checkedAllBox.checked = true
}
//全不选
var checkedNoBtn = document.getElementById("checkedNoBtn")
checkedNoBtn.onclick = function () {
for (var i = 0; i < items.length;i++){
items[i].checked = false
}
checkedAllBox.checked = false
}
//反选
var checkedRevBtn = document.getElementById("checkedRevBtn")
checkedRevBtn.onclick = function () {
checkedAllBox.checked = true
for (var i = 0; i < items.length;i++){
// if(items[i].checked == true){
// items[i].checked = false
// }else{
// items[i].checked = true
// }
items[i].checked = !items[i].checked
if (items[i].checked == false){
checkedAllBox.checked = false
}
}
}
//全选复选框
checkedAllBox.onclick = function () {
for (var i = 0; i < items.length; i++){
items[i].checked = this.checked
}
}
for (var i = 0; i < items.length; i++){
items[i].onclick = function () {
checkedAllBox.checked = true
for (var j = 0; j< items.length;j++){
if (items[j].checked == false){
checkedAllBox.checked = false
}
// if (items[j].checked == true){
// checkedAllBox.checked = true
// }else{
// checkedAllBox.checked = false
// }
}
}
}
</script>
</body>
</html>