JavaScript DOM编程 学习笔记-全选（反选 全不选）

最新推荐文章于 2021-11-26 17:27:50 发布
最新推荐文章于 2021-11-26 17:27:50 发布
阅读量682 收藏
点赞数
分类专栏： html
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/umgsai/article/details/50634111
版权

wKioL1Q_cEDhEBv7AABrzohffb0846.jpg


<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<script type="text/javascript">
	window.onload = function(){
		
		//全选  选不选
		document.getElementById("checkedAll_2").onclick = function(){
			var flag = this.checked;
			var items = document.getElementsByName("items");
			for(var i = 0; i < items.length; i++){
				items[i].checked = flag;
			}
		}
		
		var items = document.getElementsByName("items");
		for(var i = 0; i < items.length; i++){
			items[i].onclick = function(){
				//记录有多少item被选中了
				var number = 0;
				for(var j = 0; j < items.length; j++){
					if(items[j].checked){
						number++;
					}
				}
				document.getElementById("checkedAll_2").checked = (number == items.length);
			}
		}
		
		//全选
		document.getElementById("CheckedAll").onclick = function(){
			for(var i = 0; i < items.length; i++){
				items[i].checked = true;
			}
			document.getElementById("checkedAll_2").checked = true;
		}
		
		//全不选
		document.getElementById("CheckedNo").onclick = function(){
			for(var i = 0; i < items.length; i++){
				items[i].checked = false;
			}
			document.getElementById("checkedAll_2").checked = false;
		}
		
		//反选
		document.getElementById("CheckedRev").onclick = function(){
			for(var i = 0; i < items.length; i++){
				items[i].checked = !(items[i].checked);
			}
			var tt = 0;
			for(var i = 0; i < items.length; i++){
				if(items[i].checked){//记录有多少选中了
					tt++;
				}
			}
			if(tt == 0){//全不选
				document.getElementById("checkedAll_2").checked = false;
			}else if(tt == items.length){//全选
				document.getElementById("checkedAll_2").checked = true;
			}
			
		}
		
		//提交
		document.getElementById("send").onclick = function(){
			for(var i = 0; i < items.length; i++){
				if(items[i].checked){
					alert(items[i].value);
				}
			}
		}
	}
</script>
</head>
<body>
	<form method="post" action="">
		你爱好的运动是？
		<input type="checkbox" id="checkedAll_2" />全选/全不选 
		<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" id="CheckedAll" value="全　选" /> 
		<input type="button" id="CheckedNo" value="全不选" /> 
		<input type="button" id="CheckedRev" value="反　选" /> 
		<input type="button" id="send" value="提　交" />
	</form>
</body>
</html>

wKioL1Q_d5uxqeDaAABPbpEVcTc772.jpg

用JQuery实现

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<script type="text/javascript" src="js/jquery-1.7.2.js"></script>
<script type="text/javascript">
	$(function(){//相当于window.onload
		$("#checkedAll_2").click(function(){
			var flag = this.checked;
			//选择器                                                          //方法
			$(":checkbox[name='items']").attr("checked", flag);
			//高版本的JQuery中用prop代替attr
		});
	
		$(":checkbox[name='items']").click(function(){
			$("#checkedAll_2").attr("checked", $(":checkbox[name='items']").length == $(":checkbox[name='items']:checked").length);
		});
	})
</script>
</head>
<body>
	<form method="post" action="">
		你爱好的运动是？
		<input type="checkbox" id="checkedAll_2" />全选/全不选 
		<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 /> 
		
	</form>
</body>
</html>




本文出自 “优赛工作室” 博客，转载请与作者联系！

商商-77
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
JavaScript第一季 核心语法/BOM/DOM/DHTML
08-19
本课程为JavaScript系列课程的第一部分。该课程主要讲解内容：JS核心语法、浏览器对象模型BOM、文档对象模型DOM，以及DOM编程案例讲解。
HTML DOM实现全选，全不选，反选功能
weixin_55650421的博客
06-04 2784
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> <style type="text/css"> table { width: 80%; border: 1px solid #69c; border-collapse: collapse; margin: 10px auto; }.
全选反选（框）
...
09-01 216
全选反选（框） <!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <title>全选反选（框）</title> <style> * { padding: 0; margin: 0; } .wrap { w
DOM全选、全不选、反选的操作
*~~~~~向日葵、的眼里只有【太阳】
02-23 1420
DOM全选、全不选、反选的操作 今天学习了 DOM相关的知识，完成了它实现全选、全不选以及反选和提交的操作。 但是只能在发firefox中才能显示正常的效果，在IE或其他浏览器不可以。 这个问题还需要怎样去解决呢？ 请教高手！         效果：              用了onclick触发事件来写的。 源码：       MyHtml.html
09-Dom操作复选框（全选、全不选、反选）
高调做事，低调做人！
10-08 1567
<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8" %> Insert title here 您的爱好很广泛！！！ 全选/全不选
04-全选反选.html
02-15
04-全选反选.html
02-全选反选-js.html
最新发布
02-15
02-全选反选-js.html
02-全选反选-html.html
02-15
02-全选反选-html.html
JS实现全选反选全不选
06-18
JS实现全选反选全不选
JS实现全选、反选
12-28
JS JS实现全选反选 全选 反选
js第7章DOM 课后习题——利用HTML DOM实现全选、全不选、反选功能
WHT869706733的博客
11-26 7571
填空题 DOM中__document.createElement()____方法可用于创建一个元素节点。 HTML DOM中的根节点是_<html>标签_____。 判断题 document.querySelector('div').classList可以获取文档中所有div的class值。（ ×） 删除节点的removeChild()方法返回的是一个布尔类型值。（×） HTML文档每个换行都是一个文本节点。（ √） document对象的getElementsByClassN...
Dom 全选 全不选 反选
Lu_1u的博客
07-25 646
<!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></
javascript用DOM实现 复选框的全选、反选、全不选
永不停歇
03-04 2353
http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> http://www.w3.org/1999/xhtml"> 无标题文档 function qx(){  for(var i=0;i     var ck=document.getElementsByName("ck");   ck[i].checked=tr
js实现全选 全不选 反选的功能
weixin_44440256的博客
02-21 2008
&lt;!DOCTYPE html&gt; &lt;html lang="en"&gt; &lt;head&gt; &lt;meta charset="UTF-8"&gt; &lt;title&gt;Document&lt;/title&gt; &lt;/head&gt; &lt;body&gt; &lt;h1&gt;请
利用JavaScript和jQuery实现全选全不选和反选功能
bug生成师
11-24 1070
代码如下 用JavaScript实现相关功能。 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> <style type="text/css"> .blue{ background-color: d...
HTML复选框实现 全选 反选  全不选的 简单小实例
super晓权的博客
11-08 3260
 复选框实现 全选 反选  全不选的 简单小实例 &lt;html&gt; &lt;head&gt; &lt;title&gt;HTML&lt;/title&gt; &lt;style type="text/css"&gt; &lt;/style&gt; &lt;/head&gt; &lt;body&gt; &lt;in
JavaScript实现全选、全不选、反选功能
whr
10-11 970
JavaScript实现全选、全不选、反选功能
JavaScript DOM 全选/全不选，反选练习
weixin_30856965的博客
07-30 961
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> </head> <body> <form action=""...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值