【JavaScript】DOM操作复选框-阿里云开发者社区

开发者社区> 开发与运维> 正文

【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

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

分享:
开发与运维
使用钉钉扫一扫加入圈子
+ 订阅

集结各类场景实战经验,助你开发运维畅行无忧

其他文章