JavaScript全选练习
实现功能如下:
代码:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script type="text/javascript">
window.onload = function() {
//复选框
var checkedAllBox = document.getElementById("checkedAllBox");
//获取四个多选框items
var items = document.getElementsByName("items");
//全选
var checkedAllBtn = document.getElementById("checkedAllBtn");
checkedAllBtn.onclick = function() {
//遍历items
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() {
//遍历items
for (var i = 0; i < items.length; i++) {
items[i].checked = !items[i].checked;
}
//反选时判断四个框是否全选
checkedAllBox.checked = true;
for (var j = 0; j < items.length; j++) {
//只有一个没选中则不是全选
if(!items[j].checked) {
checkedAllBox.checked = false;
//一旦判断了就不用继续执行循环,优化性能
break;
}
}
}
//sendBtn设置alert
var sendBtn = document.getElementById("sendBtn");
sendBtn.onclick = function() {
//遍历items
for (var i = 0; i < items.length; i++) {
if(items[i].checked) {
alert(items[i].value);
}
}
}
//checkedAllBox
checkedAllBox.onclick = function() {
//遍历items
for (var i = 0; i < items.length; i++) {
items[i].checked = this.checked;
}
}
//items的动态 判断四个是否全选
for (var i = 0; i < items.length; i++) {
items[i].onclick = function() {
//一点先选中,在有没选中的情况下进入if会把选中改成false
checkedAllBox.checked = true;
for (var j = 0; j < items.length; j++) {
//只有一个没选中则不是全选
if(!items[j].checked) {
checkedAllBox.checked = false;
//一旦判断了就不用继续执行循环,优化性能
break;
}
}
}
}
}
</script>
</head>
<body>
<form action="#">
你爱好的运动是?
<input id="checkedAllBox" type="checkbox">
<label>全选/全不选</label> <br>
<input name="items" type="checkbox" value="足球">
<label>足球</label>
<input name="items" type="checkbox" value="篮球">
<label>篮球</label>
<input name="items" type="checkbox" value="羽毛球">
<label>羽毛球</label>
<input name="items" type="checkbox" value="乒乓球">
<label>乒乓球</label><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>