js实现选中所有的复选框，和反选功能

最新推荐文章于 2023-02-04 10:45:04 发布

dzz_bc

最新推荐文章于 2023-02-04 10:45:04 发布

阅读量5.1k

点赞数

分类专栏： javaScript

本文链接：https://blog.csdn.net/dzz_bc/article/details/80394058

版权

javaScript 专栏收录该内容

5 篇文章 0 订阅

订阅专栏

工作中用不到js的知识，学的知识几乎都还给老师了，所以闲暇时候在此记录复习的知识点，毕竟现在前端角色越来越重要

下边是简单用js知识写的复选框全选、反选功能，内容不多，有次面试居然遇到了。

<html>
	<head>
		<title>选中所有的checkbox</title>
		<meta http-equiv="Content-Type" content="text/html;charset=gb2312"/>
		<style type="text/css">
			#sp{
				font-size:12px;
				color:blue;
			}
		</style>
	</head>
	<body>
		
		<input type="checkbox" name="name" οnclick="checkAll(this)"/>全选<br>
		<input type="checkbox" name="name" />tokyo hot<br>
		<input type="checkbox" name="name" />dota<br>
		<input type="checkbox" name="name" />dota<br>
		<span id="sp" οnclick="reverse()">反选</span>
		
		<script>
			function checkAll(c){
				
				var checka = c.checked;//boolean  获得全选的复选框的状态
				var checkboxs = document.getElementsByName("name");//根据name获得每个输入框的对象数组
				for(var i = 0 ;i<checkboxs.length;i++){//普通for循环遍历
					//忽略全选的复选框
					if(i==0){
						continue;
					}
					//将复选框状态保持一致  下边的判断也可用一句:checkboxs[i].checked=checka 代替
					if(checkboxs[i].checked==checka){
						checkboxs[i].checked = checka;
					}else{
						checkboxs[i].checked = checka;
					}
				}
			}
			
			function reverse(){
				
				var checkboxs = document.getElementsByName("name");
				for(var i = 0 in checkboxs){
					//忽略全选的复选框
					if(i==0){
						continue;
					}
					//将复选框状态反选  下边的判断也可用一句:checkboxs[i].checked=！checkboxs[i].checked 代替
					if(checkboxs[i].checked==true){
						checkboxs[i].checked=false;
					}else{
						checkboxs[i].checked=true;
					}
				}
			}
		</script>
	</body>
</html>

dzz_bc

关注

0
点赞
踩
5

收藏

觉得还不错? 一键收藏
0
评论
js实现选中所有的复选框，和反选功能

工作中用不到js的知识，学的知识几乎都还给老师了，所以闲暇时候在此记录复习的知识点，毕竟现在前端角色越来越重要下边是简单用js知识写的复选框全选、反选功能，内容不多，有次面试居然遇到了。&lt;html&gt; &lt;head&gt; &lt;title&gt;选中所有的checkbox&lt;/title&gt; &lt;meta http-equiv="Content-Type" ...
复制链接

扫一扫

专栏目录