效果图
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script>
window.onload=function () {
//全选
var checkedAllBtn=document.getElementById("checkedAllBtn");
checkedAllBtn.onclick=(function () {
var items=document.getElementsByName("items");
for(var i=0;i<items.length;i++){
items[i].checked=true;
}
});
//全不选
var checkedNoBtn=document.getElementById("checkedNoBtn");
checkedNoBtn.onclick=(function () {
var items=document.getElementsByName("items");
for (var i=0;i<items.length;i++) {
items[i].checked=false;
}
});
//反选
var checkedRevBtn=document.getElementById("checkedRevBtn");
checkedRevBtn.onclick=(function () {
var items=document.getElementsByName("items");
for (var i=0;i<items.length;i++) {
if (items[i].checked) {
items[i].checked = false;
} else {
items[i].checked = true;
}
// items[i].checked=! items[i].checked 简单取反
}
});
//提交
var sendBtn=document.getElementById("sendBtn");
sendBtn.onclick=(function () {
var items=document.getElementsByName("items");
for (var i=0;i<items.length;i++){
if (items[i].checked){
alert(items[i].value);
}
}
});
//全选键
var checkedAllBox=document.getElementById("checkedAllBox");
checkedAllBox.onclick=(function () {
var items=document.getElementsByName("items");
for (var i=0;i<items.length;i++){
items[i].checked=checkedAllBox.checked
}
})
};
</script>
</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="反选">
<input type="button" id="sendBtn" value="提交">
</form>
</body>
</html>