- 科技
- demo
<!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()
{
function addEvent(bt,fun){
var bt= document.getElementById(bt);
bt.onclick=fun;
}
addEvent("bt0",function(){
var items=document.getElementsByName("items");
items.forEach(element => {
element.checked=true;
});
document.getElementById("all").checked=true;
})
addEvent("bt1",function(){
var items=document.getElementsByName("items");
items.forEach(element => {
element.checked=false;
});
document.getElementById("all").checked=false;
})
addEvent("bt2",function(){
var items=document.getElementsByName("items");
var selectAll=true;
items.forEach(element => {
element.checked=!element.checked;
if(element.checked==false)
{
selectAll=false;
}
document.getElementById("all").checked=selectAll;
});
})
addEvent("bt3",function(){
var items=document.getElementsByName("items");
for (i=0;i<items.length;i++) {
if(items[i].checked)
{
alert(items[i].value);
}
}
});
addEvent("all",function(){
var items=document.getElementsByName("items");
for (i=0;i<items.length;i++) {
items[i].checked=this.checked;
}
});
var items=document.getElementsByName("items");
for(i=0;i<items.length;i++)
{
items[i].onclick=function(){
document.getElementById("all").checked=true;
for(j=0;j<items.length;j++)
{
if(!items[j].checked)
{
document.getElementById("all").checked=false;
break;
}
}
}
}
}
</script>
</head>
<body>
<div style="text-align: center">
你的爱好运动是:
<input type="checkbox" id="all" value="全选/全不选">全选/全不选
<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="bt0" value="全选">
<input type="button" id="bt1" value="全不选">
<input type="button" id="bt2" value="反选">
<input type="button" id="bt3" value="提交">
</p>
</div>
</body>
</html>
