Javascript 04：全选、全不选

最新推荐文章于 2024-07-12 14:10:05 发布

GGYY__

最新推荐文章于 2024-07-12 14:10:05 发布

阅读量148

点赞数

文章标签： javascript 前端开发语言

本文链接：https://blog.csdn.net/weixin_52682120/article/details/124685317

版权

JavaScript 练手项目专栏收录该内容

6 篇文章 0 订阅

订阅专栏

1、全选、全不选、反选（单选）

		<body>
		<form action="">
			<p><input type="checkbox" id="" >西瓜</p>
			<p><input type="checkbox" id="">香蕉</p>
			<p><input type="checkbox" id="">橙子</p>
			<p><input type="checkbox" id="">葡萄</p>
		</form>
		<button onclick="getAll(0)">全选</button>
		<button onclick="getAll(1)">全不选</button>
		<button onclick="getAll(2)">反选</button>
		<script>
	<script>
	// 逻辑 选中的三个形式  1：用户点击    2：在标签上添加checked   3：js中  checked=true
			let input=document.getElementsByTagName("input");
			let btn=document.getElementsByTagName("button");
		//全选
			btn[0].onclick=function(){
				for(let i=0;i<input.length;i++){
					input[i].checked=true;
				}
			}
			//全选
			btn[1].onclick=function(){
				for(let i=0;i<input.length;i++){
					input[i].checked=false;
				}
			}
			//反选
			btn[2].onclick=function(){
				for(let i=0;i<input.length;i++){
					input[i].checked=!input[i].checked;
				}
			}
		
		</script>
</body>

2、封装成方法

		<body>
		<form action="">
			<p><input type="checkbox" id="" >西瓜</p>
			<p><input type="checkbox" id="">香蕉</p>
			<p><input type="checkbox" id="">橙子</p>
			<p><input type="checkbox" id="">葡萄</p>
		</form>
		<button onclick="getAll(0)">全选</button>
		<button onclick="getAll(1)">全不选</button>
		<button onclick="getAll(2)">反选</button>
		<script>
// 逻辑 选中的三个形式  1：用户点击    2：在标签上添加checked   3：js中  checked=true
			let input=document.getElementsByTagName("input");
			let btn=document.getElementsByTagName("button");
			
			//封装为函数（方法）
			function getAll(num){
				for(let i=0;i<input.length;i++){
				if(num==0){
					input[i].checked=true
				}
				if(num==1){
					input[i].checked=false;
				}
				if(num==2){
					input[i].checked=!input[i].checked;
				}
			}
		}		
		
       	</script>
	</body>

GGYY__

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
Javascript 04：全选、全不选

1、全选、全不选、反选（单选） <body> <form action=""> <p><input type="checkbox" id="" >西瓜</p> <p><input type="checkbox" id="">香蕉</p> <p><input type="checkbox" id="">橙子</p> <p><in
复制链接

扫一扫