全选，反选，全不选

2021-08-03 09:34:18 阅读：184 来源： 互联网

标签：checked getElementsByTagName 反选全选 let 全不选 input

<!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

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

ICode9

全选，反选，全不选