<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>js表单练习</title>
<script>
window.onload = function () {
// // 将checkboxs对象设置到全局作用域里，这样就可以减少代码量
var checkboxs = document.getElementById("checkboxs");
// 将nn对象设置到全局作用域里，这样就可以减少代码量
var nn = document.getElementsByName("nn");
// 设置全选按钮
// 这段代码的意思是，当点击全选按钮时给所有复选框都设置为true
var check = document.getElementById("check");
check.onclick = function () {
for (var i = 0; i < nn.length; i++) {
nn[i].checked = true;
}
//这段代码不设置的话，当点击全选按钮只会同时设置四个，全选/全不选没有效果
checkboxs.checked = true;
};
// 设置全不选按钮
// 全不选按钮原理跟全选按钮原理相同
var nocheck = document.getElementById("nocheck");
nocheck.onclick = function () {
for (var i = 0; i < nn.length; i++) {
nn[i].checked = false;
}
checkboxs.checked = false;
};
// 设置反选按钮
// 反选原理：先遍历所有复选框，进行判断，如果某个复选框是ture则进入判断让它变成false
// 如果他是false进入判断，执行else后的语句使其变成false
// 白话：是ture的变成false，是false的变成ture
var election = document.getElementById("election");
election.onclick = function(){
for(var i=0 ; i<nn.length ; i++){
// if(nn[i].checked){
// nn[i].checked = false;
// }else{
// nn[i].checked = true;
// }
// 简介代码：如果nn[i].checked为true则对面的 ！nn[i].checked取反为false赋值给它
// 同理如果他是false则取反为true赋值给他
nn[i].checked = !nn[i].checked;
// 如果不加这段代码，当全部没被勾选时。点击反选四个复选框选中，而上面的全选/全不选没有变化
// 下面的代码的意思是当所有复选框为true时，全选/全不选复选框也要为true,否则false
checkboxs.checked = true;
for(var j=0 ; j<nn.length ; j++){
if(!nn[j].checked){
checkboxs.checked = false;
}
}
}
};
// 设置全选/全不选复选框效果跟全选，全不选效果相同
var checkboxs = document.getElementById("checkboxs");
checkboxs.onclick = function(){
for(var i=0 ; i<nn.length ; i++){
// 逻辑判断，当checkboxs为true时,则让下面的复选框也跟着是true，否则都是false
// if(checkboxs.checked){
// nn[i].checked = true;
// }else{
// nn[i].checked = false;
// }
// 这个是上面代码的简写，原理相同，是ture则赋值给下面的复选框
nn[i].checked = checkboxs.checked;
}
};
// 当所有复选框都是true时，则上面的全选也应该是true
// 先遍历所有复选框
// 这段代码的意思是默认全选/全不选为true，当点击四个的某个复选框时会进入for循环判断
// 当四个复选框有一个是false那就证明全选/全不选一定是false，则false赋值给checkboxs
// 如果当所有都为true时则不会永远不会进入下面的for循环判断，默认checkboxs为true
for(var i=0 ; i<nn.length ; i++){
nn[i].onclick = function(){
checkboxs.checked = true;
for(var j=0 ; j<nn.length ; j++){
if(!nn[j].checked){
checkboxs.checked = false;
break;
}
}
};
}
// 设置提交按钮。 功能：将用户所选的属性弹出所选提示框
// 这段代码的意思是，当复选框是true时，则进入判断，返回是true的value的属性值
var put = document.getElementById("put");
put.onclick = function(){
// 遍历复选框
for(var i=0 ; i<nn.length ; i++){
if(nn[i].checked){
alert(nn[i].value);
}
}
};
};
</script>
</head>
<body>
<span>您爱好的运动是？</span><input type="checkbox" id="checkboxs">全选/全不选
<br>
<input type="checkbox" name="nn" value="足球">足球
<input type="checkbox" name="nn" value="篮球">篮球
<input type="checkbox" name="nn" value="羽毛球">羽毛球
<input type="checkbox" name="nn" value="乒乓球">乒乓球
<br>
<button id="check">全 选</button>
<button id="nocheck">全不选</button>
<button id="election">反 选</button>
<button id="put">提 交</button>
</body>
</html>
7066
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
