当input标签的name属性不同时，JS实现全选/不选

最新推荐文章于 2021-09-06 18:51:00 发布

赫丙

最新推荐文章于 2021-09-06 18:51:00 发布

阅读量752

点赞数

分类专栏：前端

本文链接：https://blog.csdn.net/haoui123/article/details/79925022

版权

前端专栏收录该内容

12 篇文章 0 订阅

订阅专栏

当所有input标签所有的name属性都不一样时，不能批量选择，可以使用document.getElementsByTagName("input")。

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html>
 <head>
  <title> New Document </title>
  <script type="text/javascript">

	//全选和全不选
	function chkAll(){
		var all = document.getElementById("checkall");
		
		//1.若name值相同且全为name="book"
		//var checkElements = document.getElementsByName("book");

		//2.若name值不同
		var checkElements = document.getElementsByTagName("input");
		if(all.checked==true){
			if(checkElements.length){
				for(var i=0;i<checkElements.length;i++){
					checkElements[i].checked = true;
				}
			}
			checkElements.chcked=true;
		}else{
			if(checkElements.length){
				for(var i=0;i<checkElements.length;i++){
					checkElements[i].checked = false;
				}
			}
		}
	}   

  </script>
 </head>

 <body>
	<input type="checkbox" name="checkall" id="checkall" value="全选"  οnclick="chkAll()"/>
	<input name="book1" type="checkbox" value="Java"/>Java
	<input name="book2" type="checkbox" value="oracle"/>oracle
	<input name="book3" type="checkbox" value="Hadoop"/>Hadoop
</body>
</html>