js写全选按钮、全不选按钮、反选按钮、全选全不选复选框代码

最新推荐文章于 2024-05-13 02:03:57 发布

仰望星空的包子

最新推荐文章于 2024-05-13 02:03:57 发布

阅读量2.2w

点赞数 9

分类专栏： JavaScript学习文章标签：全选反选框

本文链接：https://blog.csdn.net/sinat_21206105/article/details/52403444

版权

JavaScript学习专栏收录该内容

22 篇文章 0 订阅

订阅专栏

今天主要给大家介绍下如何用js原生代码写出全选、全不选、反选按钮。代码如下：

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
</head>
<body>
	<h1>你的呢爱好很广泛！！</h1>
	<br>
	<input type="checkbox" name="checkItems" id="checkItems" value="全选/全不选">全选/全不选
	<br>
	<input type="checkbox" name="items" value="足球">足球
	<input type="checkbox" name="items" value="篮球">篮球
	<input type="checkbox" name="items" value="游泳">游泳
	<input type="checkbox" name="items" value="唱歌">唱歌
	<br>
	<input type="button" name="checkall" id="checkall" value="全选">
	<input type="button" name="checkall" id="checkNo" value="全不选">
	<input type="button" name="checkall" id="checkReverse" value="反选">
	<script type="text/javascript">
		
		// 处理全选
		document.getElementById('checkall').οnclick=function(){
		/*************************************************/			
			// 获取所有的复选框
			var checkElements=document.getElementsByName('items');
			for(var i=0;i<checkElements.length;i++){
				var checkElement=checkElements[i];
				// 方法一
				// checkElement.setAttribute('checked',' checked');
				// 方法二
				checkElement.checked="checked";
			}
		}
		/*************************************************/
		// 处理全不选
		document.getElementById('checkNo').οnclick=function(){
			// 获取所有的复选框
			var checkElements=document.getElementsByName('items');
			for(var i=0;i<checkElements.length;i++){
				var checkElement=checkElements[i];
				// 方法一火狐不支持
				// checkElement.setAttribute('checked',null);
				// 方法二 火狐和ie都支持
				checkElement.checked=null;
			}
		}
/******************************************************************/
		//反选
		 document.getElementById('checkReverse').οnclick=function(){
			// 获取所有的复选框
			var checkElements=document.getElementsByName('items');
			for(var i=0;i<checkElements.length;i++){
				var checkElement=checkElements[i];
				if (checkElement.checked) {
					checkElement.checked=null;
				}
				else{
					checkElement.checked="checked";
				}
				// 方法一
				// checkElement.setAttribute('checked',null);
				// 方法二 火狐和ie都支持
				
			}
		}
/***********************************************************/
		//全选/不选
		document.getElementById('checkItems').οnclick=function()
		{
		 // 获取所有的复选框
			var checkElements=document.getElementsByName('items');
			if (this.checked) {
				for(var i=0;i<checkElements.length;i++){
					var checkElement=checkElements[i];
					checkElement.checked="checked";
				}

			}
			else{
				for(var i=0;i<checkElements.length;i++){
					var checkElement=checkElements[i];
					checkElement.checked=null;
				}
			}

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

仰望星空的包子

关注

9
点赞
踩
34

收藏

觉得还不错? 一键收藏
1
评论
js写全选按钮、全不选按钮、反选按钮、全选全不选复选框代码

今天主要给大家介绍下如何用js原生代码写出全选、全不选、反选按钮。代码如下： Document 你的呢爱好很广泛！！全选/全不选足球篮球游泳唱歌 // 处理全选 document.getElementById('checkall').onclick=function(){ /*********************
复制链接

扫一扫

专栏目录