编写一个网页上的多选，反选，全选的框子
<!DOCTYPE html>
<html>
<head>
<title>Myslcel.html</title>
<meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
<meta http-equiv="description" content="this is my page">
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<!--<link rel="stylesheet" type="text/css" href="./styles.css">-->
<!-- 需求：创建一个多选，单选，反选
1.定义多选元素
2.绑定触发事件
3.通过获取标签来改变checkbox的默认值来达到预期的效果
-->
</head>
<body>
<input type="checkbox" id="or" onclick="or()">全选/全不选<br>
<input type="checkbox" name="love" >小泽<br>
<input type="checkbox" name="love" >小苍<br>
<input type="checkbox" name="love" >隔壁老王<br>
<input type="checkbox" name="love" >龙泽<br>
<button onclick="all()">全选</button>
<button onclick="noall()">全不选</button>
<button onclick="fsel()">反选</button>
</body>
<script type="text/javascript">
function all(){
//获取标签
var input=document.getElementsByName("love");
for(var i=0;i<input.length;i++){
var inputs=input[i];
inputs.checked=true;
}
}
function noall(){
//获取标签
var input=document.getElementsByName("love");
for(var i=0;i<input.length;i++){
var inputs=input[i];
inputs.checked=false;
}
}
function fsel(){
//获取标签
var input=document.getElementsByName("love");
for(var i=0;i<input.length;i++){
var inputs=input[i];
if( inputs.checked==false){
inputs.checked=true;
}else{
inputs.checked=false;
}
}
}
function or(){
var input=document.getElementById("or");
input.checked==true? all():noall();
}
</script>
</html>
