JavaScript专题实例学习一全选全不选择反选

最新推荐文章于 2023-10-23 14:09:15 发布

从放弃到开始

最新推荐文章于 2023-10-23 14:09:15 发布

阅读量122

点赞数

分类专栏： js专题文章标签： js 全选全不选反选

本文链接：https://blog.csdn.net/qq_30764991/article/details/82815358

版权

js专题专栏收录该内容

5 篇文章 0 订阅

订阅专栏

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
  <head>
    <title>03-getElementsByTagName方法.html</title>
	
    <meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
    <meta http-equiv="description" content="this is my page">
    <meta http-equiv="content-type" content="text/html; charset=UTF-8">
    
    <!--<link rel="stylesheet" type="text/css" href="./styles.css">-->
	<script type="text/javascript">
		// onload事件的函数
		function onloadFunc() {
			// 通过标签名，查找指定的标签对象的集合。
			var inputObjs = document.getElementsByTagName("input");
			// getElementsByTagName方法返回的是一个集合，这个集合的操作，
			// 跟javascript数组的操作一样
			// alert(inputObjs);
			// alert(inputObjs.length);
		}
		
		// 全选
		function checkAll(){
			// alert(1);
			// 1.获取<input type="checkbox" 标签对象集合
			var inputObjs = document.getElementsByTagName("input");
// 			alert(inputObjs);
// 			alert(inputObjs.length);
			// 2.遍历获取每一个<input type="checkbox" 标签对象
			for (var i = 0; i < inputObjs.length; i++) {
				// 3.修改<input type="checkbox" 标签对象的checked属性值为true。
				var inputObj = inputObjs[i];
				inputObj.checked = true;
			}
		}
		// 全不选
		function checkNo() {
			// 1.先获取所有的<input type="checkbox" 的标签对象的集合。
			var inputObjs = document.getElementsByTagName("input");
			// 2.遍历获取每一个<input type="checkbox" 的标签对象
			for (var i = 0; i < inputObjs.length; i++) {
				// 3.修改<input type="checkbox" 标签对象的checked属性值为false
				var inputObj = inputObjs[i];
				inputObj.checked = false;
			}
		}
		//反选
		function checkReverse(){
			// 1.先获取所有的<input type="checkbox" 的标签对象的集合。
			var inputObjs = document.getElementsByTagName("input");
			// 2.遍历获取每一个<input type="checkbox" 标签对象
			for (var i = 0; i < inputObjs.length; i++) {
				// 3.判断<input type="checkbox" 标签对象的checked属性
				var inputObj = inputObjs[i];
// 				if (inputObj.checked) {
// 				如果checked属性值为true，说明当前是选中状态，需要修改为false值
// 					inputObj.checked = false;
// 				} else {
// 					如果checked属性值为false，说明当前未被选中，需要修改值为true
// 					inputObj.checked = true;
// 				}
				inputObj.checked = !inputObj.checked;
			}
		}
		
	</script>
  </head>
  
  <body onload="onloadFunc();">
	兴趣爱好：
	<input type="checkbox" checked="checked"/>写代码
	<input type="checkbox" />敲代码
	<input type="checkbox" />看代码
	<input type="checkbox" />背代码
	<button onclick="checkAll();">全选</button>
	<button onclick="checkNo();">全不选</button>
	<button onclick="checkReverse();">反选</button>
  </body>
</html>

从放弃到开始

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
JavaScript专题实例学习一全选全不选择反选

&lt;!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"&gt;&lt;html&gt; &lt;head&gt; &lt;title&gt;03-getElementsByTagName方法.html&lt;/title&gt; &lt;meta http-equiv="keywords&
复制链接

扫一扫