开发者社区> 光仔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中那些进阶操作知识(上篇)
盘点JavaScript中那些进阶操作知识(上篇)
0 0
盘点JavaScript中那些进阶操作知识(下篇)
盘点JavaScript中那些进阶操作知识(下篇)
0 0
JavaScript小效果的实现(笔记)
在学习一些JavaScript效果,做一些实现效果笔记,顺便整理一下思路。 LightBox效果实现: &lt;!DOCTYPE html&gt; &lt;meta charset="utf-8"&gt; &lt;html&gt; &lt;head&gt; &lt;title&gt;Lightbox效果&lt;/title&gt; &lt;style type="text/cs
951 0
javascript实现中国各大城市快速下拉选择
如果开发中遇到需要输入城市名的页面,那么这个特效可以帮助快速输入。这是一个纯js实现的效果,可以快速的输入城市名称,支持鼠标点击选择,输入城市的拼音或者拼音首字母,使用方便。可以在输入框中通过点击生成包含中国各个城市的下拉列表,进行快速选择,快速切换定位。体验效果:http://hovertree.
1489 0
在Javascript中实现伪哈希表
了解数据结构的人应该都听说过哈希表这种数据结构,它是一种典型的利用键值对存储并检索数据的一种非线性结构,又称散列表或杂凑法。在一般的线性表结构中,数据的相对位置是随机的,即数据和用于检索的关键字之间不存在确定的关系,检索数据时往往需要进行一系列的比较,最终找到要检索的数据,这种方法往往建立在循环比较的机制上,利用时间的代价节省了空间,实现了数据的存储和检索功能。
594 0
JavaScript实现map
//定义map function Map() { this.container = {}; } //将key-value放入map中 Map.prototype.
478 0
利用JavaScript来实现用动态检验密码强度
平时我们会在某些网站的注册页面或者更改密码的页面发现当我们输入密码时,会有一个类似于进度条的长条进行提示用户输入的密码强度。如下图: 我看到有些人用几张不同的图片来替换,这样似乎可以,但是不太好。所以我通过其他方式实现。
767 0
Javascript版的Repeater控件实现
其实有点标题党了,呵呵,主要是项目的特殊性,出于性能考虑项目经理规定不能用任何服务端控件(包括Repeater控件),同时尽量减少服务端处理,并尽可能压缩最终生成的html源代码,所以只用JS实现。 代码:     JavaScript的Repeater控件实现--made by 菩提树下的杨...
593 0
用javascript实现的分页控件
随着Ajax的应用越来越多,经常需要在前台去加载数据,这样可以减少页面加载的时间,同时也改善了用户的体验性,所以结合实际的项目需要我写了一个javascript的分页控件,用于绑定table,实现类似datagrid分页控件的功能。
619 0
Javascript实现网页上的多级菜单(竖着)
使用方法:1,包含menu.js和menu.css 2,用创建主菜单类   main = new MainMenu(10,50,"My Menu");这里,MainMenu的前两个参数表示其左上角位置坐标,前者为left,后者为top。第三个参数为菜单标题。之后用MenuItem类建立菜单项MenuItem的源型如下:   function MenuItem(_parent,_caption
807 0
+关注
光仔december
目前致力于JavaEE(struts/hibernate/spring/MyBatis等框架)、数据库(Mysql/oracle)、静态页面(Html/Css)技术和脚本(JavaSript/JQuery/Ajax)等技术方面的研究
文章
问答
文章排行榜
最热
最新
相关电子书
更多
Javascript异步编程
立即下载
Javascript中的函数
立即下载
Javascript中的对象
立即下载