其他分享
首页 > 其他分享> > 全选,反选,全不选

全选,反选,全不选

作者:互联网

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
</head>
<body>
<form>
	<p><input type="checkbox" name="">1</p>
	<p><input type="checkbox" name="">2</p>
	<p><input type="checkbox" name="">3</p>
	<p><input type="checkbox" name="">4</p>
</form>
<button onclick="getAll(0)">全选</button>
<button onclick="getAll(1)">全不选</button>
<button onclick="getAll(2)">反选</button>
<script type="text/javascript">
 // 选中三个形式:1.用户点击(√)  2.在标签上添加checked属性   3.js中,checked=true
 // 注意,返回的是多个元素,要用getElementsByTagName,加了s
 let input = document.getElementsByTagName('input')
 let but = document.getElementsByTagName('button')
 console.log(input)
 // but[0].onclick = function() {
 // 	for(let i=0;i<input.length;i++){
 // 		input[i].checked = true
 // 	}
 // }
 // but[1].onclick = function() {
 // 	for(let i=0;i<input.length;i++){
 // 		input[i].checked = false
 // 	}
 // }
 // but[2].onclick = function() {
 // 	for(let i=0;i<input.length;i++){
 // 		input[i].checked = !input[i].checked
 // 	}
 // }
 
 // 封装为函数,进行优化
        function getAll(num){
            for(let i=0;i<input.length;i++){
                if(num==0){
                    input[i].checked = true;
                }else if(num==1){
                    input[i].checked = false;
                }else{
                    input[i].checked = !input[i].checked;
                }
            }
        }
</script>
</body>
</html>

标签:checked,getElementsByTagName,反选,全选,let,全不选,input
来源: https://www.cnblogs.com/gracexin/p/15092787.html