【JavaScript】JavaScript中的checkbox之全选、全不选、反选

最新推荐文章于 2020-11-26 19:25:20 发布

Mr小林

最新推荐文章于 2020-11-26 19:25:20 发布

阅读量607

点赞数 2

分类专栏： ------【Web前端】文章标签： java web checkbox javascript

本文链接：https://blog.csdn.net/mrlin6688/article/details/50988786

版权

------【Web前端】专栏收录该内容

24 篇文章 0 订阅

订阅专栏

JavaWeb中很常见的一种功能是checkbox的选择问题。下面是功能展示图：

代码部分：

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
	<head>
		<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
		<title>Untitled Document</title>
		
	</head>
	<body>
		<form method="post" action="">
		   	请选择您的爱好!
			<br><input type="checkbox" name ="item" 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="反　选"/> 
		
			
		</form>
	</body>
	<script language="JavaScript">
			//反选
			//1 获得反选按钮,添加点击事件
			document.getElementById("CheckedRev").οnclick=function(){
				//2 获得到要操作4个input 对象
				var items =  document.getElementsByName("items");
				//3 遍历
				for(var i = 0 ; i < items.length ; i++){
				
					items[i].checked = !items[i].checked;
				}
				
			}	
			//全选
			//1 获得反选按钮,添加点击事件
				document.getElementById("CheckedAll").οnclick=function(){
				//2 获得到要操作4个input 对象
				var items =  document.getElementsByName("items");
				//3 遍历
				for(var i = 0 ; i < items.length ; i++){
				
					items[i].checked = true;
				}
				
			}	
			//全不选选
			//1 获得反选按钮,添加点击事件
				document.getElementById("CheckedNo").οnclick=function(){
				//2 获得到要操作4个input 对象
				var items =  document.getElementsByName("items");
				//3 遍历
				
				for(var i = 0 ; i < items.length ; i++){
				   
					items[i].checked = false;
					
				}
				
			}	
			
			
		
	</script>
</html>

1、JavaScript中的经典小例子（一）

2、JavaScript中Node节点的CURD

Mr小林

关注

2
点赞
踩
0

收藏

觉得还不错? 一键收藏
4
评论
【JavaScript】JavaScript中的checkbox之全选、全不选、反选

JavaWeb中很常见的一种功能是checkbox的选择问题。下面是功能展示图：代码部分： Untitled Document 请选择您的爱好! 全选/全不选足球篮球游泳唱歌 //反选
复制链接

扫一扫

专栏目录