开发者社区> 光仔december> 正文
阿里云
为了无法计算的价值
打开APP
阿里云APP内打开

【JavaScript】DOM操作复选框

简介:
+关注继续查看
DOM操作复选框

实现一个效果如下图:


点击"全选/全不选"复选框之后,足球、篮球、游泳和唱歌均被选取。取消"全选/全不选"复选框之后,被选中的所有都变成未选中。点击"全选"按钮之后,足球、篮球、游泳和唱歌均被选取,点击"全不选"之后,被选中的所有都变成未选中。点击反选之后,未选中的变成选中的,选中的变成未选中的。

下面我们来实现这个效果。
源代码:
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
	<head>
		<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
		<title>js测试</title>
		
	</head>
	<body> 
	   您的爱好很广泛!!!
  	 <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="checkallNo" value="全不选" />
		<input type="button" name="checkall" id="check_revsern" value="反选" />
	</body>
	<script language="javascript">
		window.onload=function(){
			//实现全选
			document.getElementById("checkall").onclick=function(){
				var itemElements=document.getElementsByName("items");
				for(var i=0;i<itemElements.length;i++){
					//方法1
					//itemElements[i].setAttribute("checked","checked");
					//方法2
					itemElements[i].checked="checked";
				}
			}
			//实现全不选
			document.getElementById("checkallNo").onclick=function(){
				var itemElements=document.getElementsByName("items");
				for(var i=0;i<itemElements.length;i++){
					//方法1,IE可以,其他浏览器不支持
					//itemElements[i].setAttribute("checked",null);
					//方法2,都行
					itemElements[i].checked=null;
				}
			}
			//实现反选
			document.getElementById("check_revsern").onclick=function(){
				var itemElements=document.getElementsByName("items");
				for(var i=0;i<itemElements.length;i++){
					
					//itemElements[i].checked:如果选中为true,否则false
					if(itemElements[i].checked){
						itemElements[i].checked=null;
					}else{
						itemElements[i].checked="checked";
					}
				}
			}
			//全选/全不选复选框的功能
			document.getElementById("checkItems").onclick=function(){
				var itemElements=document.getElementsByName("items");
				for(var i=0;i<itemElements.length;i++){
					
					//itemElements[i].checked:如果选中为true,否则false
					if(this.checked){
						itemElements[i].checked=null;
					}else{
						itemElements[i].checked="checked";
					}
				}
			}
		}
	</script>
</html>

写完了,是不是很简单?哈哈

转载请注明出处:http://blog.csdn.net/acmman/article/details/48010131

版权声明:本文内容由阿里云实名注册用户自发贡献,版权归原作者所有,阿里云开发者社区不拥有其著作权,亦不承担相应法律责任。具体规则请查看《阿里云开发者社区用户服务协议》和《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容,填写侵权投诉表单进行举报,一经查实,本社区将立刻删除涉嫌侵权内容。

相关文章
JavaScript学习笔记(二),js内置对象,Dom操作和Bom操作
JavaScript学习笔记(二),js内置对象,Dom操作和Bom操作
0 0
js 实现链表的常规操作
js 实现链表的常规操作
0 0
JS案例:购物车操作(简单实现)
JS案例:购物车操作(简单实现)
0 0
js 复杂数组的元素操作,实现数据按搜索条件在前端显示
在工程项目中需要实现的一个需求,自己设计通过修改前端js代码来实现数据按搜索条件来对应显示的功能(实际可以根据key通过服务请求来实现的つ﹏⊂同事帮助下实现的)。在这个方向上,踏了很多坑,每次都觉得快实现了,可还是一直有问题。最后即使在同事另辟蹊径下解决的问题,但在不甘心下自己还是决定按自己思路将之实现掉。
0 0
JavaScript进阶操作之过滤filter
引入 我们在日常生活中,不难遇到一个非常耗时间的工作——筛选。 比如,帮老师筛查出不及格的人数,帮老总筛选出上班考勤全满的人——掘金工作人员筛选出更文数量在30以上的创作者(不是)…… 人肉计数和筛查显然非常低效,而且很容易出错。计算机就是用来帮我们干这件事的。很多人估计第一反应回是用循环,遍历所有元素,满足条件提出来,不满足就下一个
0 0
JavaScript获取和操作 DOM 节点
获取DOM节点的方法有很多,部分方法返回的是NodeList或HTMLCollection类型,而不是数组,不能像操作数组一样操作这些集合,转换成数组可以更方便的利用数组的原生方法对其进行操作。操作节点的时候,特别是动态渲染的节点,需要做空判断,防止程序报错中断执行。操作DOM是前端程序员的基本功,也是编写网页的重要知识之一。
0 0
JS DOM之操作CSS属性
在JavaScript中,我们可以使用getComputedStyle()方法来获取一个CSS属性的取值 语法:
0 0
JS DOM之使用对象方法操作HTML属性
1.getAttribute 在JavaScript中,我们可以使用getAttribute()方法来获取元素某个属性的值
0 0
JS基础-操作BOM对象
JavaScript和浏览器关系? JavaScrip诞生就是为了能够他在浏览器中运行! BOM:浏览器对象模型
0 0
+关注
光仔december
目前致力于JavaEE(struts/hibernate/spring/MyBatis等框架)、数据库(Mysql/oracle)、静态页面(Html/Css)技术和脚本(JavaSript/JQuery/Ajax)等技术方面的研究
文章
问答
文章排行榜
最热
最新
相关电子书
更多
Javascript中的函数
立即下载
Javascript异步编程
立即下载
JS零基础入门教程(上册)
立即下载