<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<script>
window.onload = function(){
// 1 checkedAllBtn(全选)
// 为checkedAllBtn的按钮绑定单击响应函数
var checkedAllBtn = document.getElementById('checkedAllBtn');
checkedAllBtn.onclick = function(){
// 获取四个多选框items
var items = document.getElementsByName('items');
// 遍历items
for (var i=0; i<items.length; i++){
// 设置四个多选框变成选中状态
items[i].checked = true
};
checkedAllBox.checked = true;
};
// 2 checkedNoBtn(全不选)
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;
};
checkedAllBox.checked = false;
};
// 3 checkedRevBtn(反选)
var checkedRevBtn = document.getElementById('checkedRevBtn');
checkedRevBtn.onclick = function(){
var items = document.getElementsByName('items');
// checkedAllBox设置为选中状态
checkedAllBox.checked = true;
for (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;
// 判断四个是否全选
// 只要有一个没选中,则就全不选.
if (!items[i].checked) {
// 一旦进入判断,则证明不是全选状态
// 将checkedAllBox设置为没选中状态
checkedAllBox.checked = false;
};
};
};
// 4 sendBtn(提交)
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);
};
};
};
// 5 checkedAllBox(全选/全不选)
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
// 这里可以用this
items[i].checked = this.checked;
};
};
// 6 items
// 为四个多选框分别绑定点击响应函数
var items = document.getElementsByName('items');
for (var i=0; i<items.length; i++){
items[i].onclick = function(){
// checkedAllBox设置为选中状态
checkedAllBox.checked = true;
for (var j=0; j<items.length; j++){
// 判断四个是否全选
// 只要有一个没选中,则就全不选.
if (!items[j].checked){
// 一旦进入判断,则证明不是全选状态
// 将checkedAllBox设置为没选中状态
checkedAllBox.checked = false;
// 一旦进入判断,则已经得出结果,不用再继续执行循环
break;
};
};
};
};
};
</script>
</head>
<body>
<form action="" method="POST">
你的运动爱好是:
<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>
JS基础-input全选练习题
最新推荐文章于 2024-04-22 16:35:15 发布