记录,js的全选,全不选,反选功能。
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport"
content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>js复选功能</title>
<script type="text/javascript">
//全选
function selectAll() {
//拿到复选框的dom对象
var name = document.getElementsByName("check");
//对dom对象的属性,方法进行操作
for(var i = 0;i<name.length;i++){
name[i].checked=true;
}
}
//全不选
function selectNone() {
var name = document.getElementsByName("check");
for(var i = 0;i<name.length;i++){
name[i].checked=false;
}
}
//反选
function selectReverse() {
var name = document.getElementsByName("check");
//alert(typeof name);//object
//alert(name);//[object NodeList]
for(var i = 0;i<name.length;i++){
/*if(name[i].checked){
name[i].checked=false;
}else{
name[i].checked=true;
}*/
name[i].checked=!name[i].checked;
}
}
</script>
</head>
<body>
<input type="checkbox" name="check" value="篮球">篮球
<input type="checkbox" name="check" value="排球">排球
<input type="checkbox" name="check" value="棒球">棒球
<input type="checkbox" name="check" value="网球">网球
<br>
<button onclick="selectAll()">全选</button>
<button onclick="selectNone()">全不选</button>
<button onclick="selectReverse()">反选</button>
</body>
</html>