<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title>全选</title>
<style>
.container {
margin:0px auto;
width:500px;
}
</style>
<script>
window.onload=function(){
//获取所有的复选框
var items=document.getElementsByName("items");
//全选/反选
//onchange事件:当元素的值发生改变时 进行触发
document.getElementById("all").onchange=function(){
for(var i=0;i<items.length;i++){
//items[i].checked=this.checked;
//items[i].setAttribute("checked",this.checked);
items[i].checked=!items[i].checked;//取反
}
}
//全选 为按钮添加点击事件
document.getElementById("checkedAll").onclick=function(){
for(var i=0;i<items.length;i++){
//选中
items[i].checked=true;
}
}
//全不选
document.getElementById("checkedNo").onclick=function(){
for(var i=0;i<items.length;i++){
//选中
items[i].checked=false;
}
}
//反选
document.getElementById("checkRev").onclick=function(){
for(var i=0;i<items.length;i++){
items[i].checked=!items[i].checked;//取反
}
}
//提交
document.getElementById("submit").onclick=function(){
var result="";
for(var i=0;i<items.length;i++){
if(items[i].checked){
result+=items[i].value+"\n";
}
}
alert(result);
}
}
</script>
</head>
<body>
<form action="/" method="post">
<div class="container">
<label>你爱好的运动是?</label><input type="checkbox" name="name" id="all" />全选/反选
<p>
<input type="checkbox" name="items" value="足球" />足球
<input type="checkbox" name="items" value="篮球" />篮球
<input type="checkbox" name="items" value="排球" />排球
<input type="checkbox" name="items" value="台球" />台球
</p>
<p>
<input type="button" id="checkedAll" value="全选"/>
<input type="button" id="checkedNo" value="全不选" />
<input type="button" id="checkRev" value="反选" />
<input type="button" id="submit" value="提交" />
</p>
</div>
</form>
</body>
</html>
JavaScript复选框实现全选、全不选、反选、提交
猜你喜欢
转载自blog.csdn.net/weixin_43708090/article/details/84863186
今日推荐
周排行