全选练习
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script type="text/javascript">
window.onload = function() {
// 获取checkboxbtn的值
var checkboxbtn = document.getElementById("checkboxbtn");
// 获取checkedAllBox的值
var checkedAllBox = document.getElementById("checkedAllBox");
// 获取checkboxNobtn的值
var checkboxNobtn = document.getElementById("checkboxNobtn");
// 获取checkboxRevbtn的值
var checkboxRevbtn = document.getElementById("checkboxRevbtn");
// 获取checkboxSenbtn的值
var checkboxSenbtn = document.getElementById("checkboxSenbtn");
// 获取items
var items = document.getElementsByName("itemst");
// 全选
// 为checkboxbtn绑定一个单击响应函数
checkboxbtn.onclick = function() {
// 看看能不能获取成功
// alert(items.length);
// 遍历itemst
for (var i = 0; i < items.length; i++) {
// 测试是否选中
// alert(items[i].checked);
// 全选
items[i].checked = true;
}
checkedAllBox.checked = true;
// 检查是否为全选
}
// 全不选
// 为checkboxNobtn绑定一个单击响应函数
checkboxNobtn.onclick = function() {
// 看看能不能获取成功
// alert(items.length);
// 遍历itemst
for (var i = 0; i < items.length; i++) {
// 测试是否选中
// alert(items[i].checked);
// 全不选
items[i].checked = false;
}
// 检查是否为不选
checkedAllBox.checked = false;
}
// 反选
// 为checkboxRevbtn绑定一个单击响应函数
checkboxRevbtn.onclick = function() {
// 看看能不能获取成功
// alert(items.length);
// 遍历itemst
for (var i = 0; i < items.length; i++) {
// 测试是否选中
// alert(items[i].checked);
// 反选
items[i].checked = !items[i].checked;
}
// 检查是否为全部反选
checkedAllBox.checked = true;
for (var j = 0; j < items.length; j++) {
if (!items[j].checked) {
// 判断是否没选中
checkedAllBox.checked = false;
}
}
}
// 提交
// 为checkboxSenbtn绑定一个单击响应函数
checkboxSenbtn.onclick = function() {
// 看看能不能获取成功
// alert(items.length);
// 遍历itemst
for (var i = 0; i < items.length; i++) {
// 测试是否选中
// alert(items[i].checked);
// 提交判断
if (items[i].checked) {
alert(items[i].value);
}
}
}
// 全选/全不选
// 为checkedAllBox绑定一个单击响应函数
checkedAllBox.onclick = function() {
for (var i = 0; i < items.length; i++) {
// 四种方法都行
checkedAllBox.checked ? items[i].checked = true : items[i].checked = false;
// items[i].checked=this.checked;
// items[i].checked=checkedAllBox.checked;
// items[i].checked=!items[i].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) {
// 判断是否没选中
checkedAllBox.checked = false;
break;
}
}
}
}
}
</script>
</head>
<body>
<form action="" method="post">
<input type="checkbox" id="checkedAllBox" />全选/全不选
<br />
<input type="checkbox" name="itemst" id="" value="1" />1
<input type="checkbox" name="itemst" id="" value="2" />2
<input type="checkbox" name="itemst" id="" value="3" />3
<input type="checkbox" name="itemst" id="" value="4" />4
<br />
<input type="button" id="checkboxbtn" value="全选" />
<input type="button" id="checkboxNobtn" value="全不选" />
<input type="button" id="checkboxRevbtn" value="反选" />
<input type="button" id="checkboxSenbtn" value="提交" />
</form>
</body>
</html>
