一个关于勾选框的练习
作者：互联网
有几个checkedbox和几个button,
你需要通过js的方式来达到按button时达成某些效果
原文代码如下
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
div{
text-align: center;
}
</style>
<script type="text/javascript">
window.onload = function(){
var all = document.getElementById("checkall");
var notall = document.getElementById("notcheckall");
var reverse = document.getElementById("reverse");
var alert2 = document.getElementById("alert");
var sport = document.getElementsByName("sport");
all.onclick = function(){
for(var start = 0;start < sport.length;start++){
sport[start].checked = true;
}
alert("checked all");
};
notall.onclick = function(){
for(var start = 0;start < sport.length;start++){
sport[start].checked = false;
}
alert("not checked all");
};
reverse.onclick = function(){
for(var start = 0;start < sport.length;start++){
if(sport[start].checked == true){
sport[start].checked = false;
}else{
sport[start].checked = true;
}
}
alert("reverse");
};
alert2.onclick = function(){
alert("提交了哦！");
};
}
</script>
</head>
<body>
<div id="text">
<a >你最喜欢的运动是？</a>
</div>
<br />
<div id="">
<input type="checkbox" name="sport" id="first" value="篮球" />篮球
<input type="checkbox" name="sport" id="first" value="足球" />足球
<input type="checkbox" name="sport" id="first" value="羽毛球" />羽毛球
<input type="checkbox" name="sport" id="first" value="乒乓球" />乒乓球
</div>
<br />
<div id="">
<button id="checkall"type="button">全选</button>
<button id="notcheckall"type="button">全不选</button>
<button id="reverse"type="button">反选</button>
<button id="alert"type="button">提交</button>
</div>
</body>
</html>
需要注意的是，在选择勾选框的是否打钩属性需要用到checkedbox的checked属性
当这个属性为true时就是打钩的，当为false时就是不打勾
标签：function,document,checked,练习,start,关于,var,sport,勾选框 来源： https://blog.csdn.net/qq_53630069/article/details/120377999