html input关于选项框全选和全不选的实现

最新推荐文章于 2024-04-12 09:00:21 发布

wallowyou

最新推荐文章于 2024-04-12 09:00:21 发布

阅读量6.1k

点赞数

分类专栏：学习文章标签： web前端 html javascript jquery

本文链接：https://blog.csdn.net/wallowyou/article/details/54376034

版权

学习专栏收录该内容

12 篇文章 0 订阅

订阅专栏

一次笔试中出现的题目，也非常简单。

使用原生js实现的方法是，当全选的被勾选中的时候，把上面所有的选项的checked改为true,还可以使用jQuery，那就更加简单了。

代码如下:

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
</head>
<body>
	<form>  
	<input name="userid" type="checkbox" value="1" />  
    <input name="userid" type="checkbox" value="2" />  
    <input name="userid" type="checkbox" value="3" />  
    <input name="userid" type="checkbox" value="4" />  
    <input name="userid" type="checkbox" value="5" />  
    <input name="userid" type="checkbox" value="6" />  
    <br />  
    <input type="button" value="全选" id="all"/>  
	<br />  
    <input type="button" value="全不选" id="resove"/>  
    <br />  
   
</form>  
<script type="text/javascript" src="jquery-1.11.3.js"></script>
	<script type="text/javascript">
	//使用js
		var all=document.getElementById("all");
		console.log(all);
		var resove=document.getElementById("resove");
		all.οnclick=function(){
			
			var arr=document.querySelectorAll("[type='checkbox']");
			arr.forEach(function(val) {
				val.checked=true;
			});
		}
		resove.οnclick=function(){
			
			var arr=document.querySelectorAll("[type='checkbox']");
			arr.forEach(function(val) {
				val.checked=false;
			});
		}
		//使用jQuery
		// $("#all").click(function(){
		// 	$("form :checkbox").prop("checked",true);
		// });
		// $("#resove").click(function(){
		// 	$("form :checkbox").prop("checked",false);
		// })



	</script>
</body>
</html>

使用jQuery记得先引入jQuery

wallowyou

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
1
评论
html input关于选项框全选和全不选的实现

一次笔试中出现的题目，也非常简单。使用原生js实现的方法是，当全选的被勾选中的时候，把上面所有的选项的checked改为true,还可以使用jQuery，那就更加简单了。代码如下: Document //使
复制链接

扫一扫