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

缺乏、安全感 2022-05-09 22:03 200阅读 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">
        
        
    	<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>