<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
</style>
<script>
document.write("你最喜欢的球员是?");
window.onload = function () {
var QuanXuan = document.getElementById("QuanXuan");//获取全选的选择框
var ChsAll = document.getElementById("ChooseAll");//获取全选按钮
ChsAll.onclick = function () {
var ChooseArr = document.getElementsByName("checktbw");
for (var i = 0; i < ChooseArr.length; i++) {
ChooseArr[i].checked = true;
}
QuanXuan.checked = true;
};
var AllNoChs = document.getElementById("AllNoChoose");//获取全不选按钮
AllNoChs.onclick = function () {
var Arrs = document.getElementsByName("checktbw");
for (var i = 0; i < Arrs.length; i++) {
Arrs[i].checked = false;
}
QuanXuan.checked = false;
};
var UpAndDown = document.getElementById("UpAndDown");//获取反选按钮
UpAndDown.onclick = function () {
var Arrs = document.getElementsByName("checktbw");
for (var i = 0; i < Arrs.length; i++) {
Arrs[i].checked = !Arrs[i].checked;
}
QuanXuan.checked = true;
for (var o = 0; o < cp3.length; o++) {
if (!cp3[o].checked) {
QuanXuan.checked = false;
break;
}
}
};
var TiJiao = document.getElementById("Over");//获取提交按钮
TiJiao.onclick = function () {
var Arrs = document.getElementsByName("checktbw");
for (var i = 0; i < Arrs.length; i++) {
if (Arrs[i].checked)
alert(Arrs[i].value);
}
};
QuanXuan.onclick = function () {
var arr = document.getElementsByName("checktbw");
for (var i = 0; i < arr.length; i++) {
arr[i].checked = this.checked;
}
};
var cp3 = document.getElementsByName("checktbw");
for (var i = 0; i < cp3.length; i++) {
cp3[i].onclick = function () {
QuanXuan.checked = true;
for (var o = 0; o < cp3.length; o++) {
if (!cp3[o].checked) {
QuanXuan.checked = false;
break;
}
}
}
}
};
</script>
</head>
<body>
<input type="checkbox" id="QuanXuan">全选/全不选</input>
<br>
<input type="checkbox" name="checktbw" value="艾弗森">艾弗森</input>
<input type="checkbox" name="checktbw" value="欧文">欧文</input>
<input type="checkbox" name="checktbw" value="库里">库里</input>
<input type="checkbox" name="checktbw" value="保罗">保罗</input>
</br>
<br>
<button id="ChooseAll">全选</button>
<button id="AllNoChoose">全不选</button>
<button id="UpAndDown">反选</button>
<button id="Over">提交</button>
</br>
</body>
</html>
记住全选按钮,全不选按钮的操作一定要把全选框/全不选框勾上或者取消打勾,而且当小选项有一个没有选上的时候一定要把全选/全不选框取消打勾,全部选上时也要把它打上勾。