• 选择框


    有一些按钮,实现全选,反选,不选

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>选择框</title>
    <script>
    window.onload=function (){
    	var oBtn1=document.getElementById('btn1');
    	var oBtn2=document.getElementById('btn2');
    	var oBtn3=document.getElementById('btn3');
    	var oDiv=document.getElementById('div1');
    	var aCh=oDiv.getElementsByTagName('input');
    	oBtn1.onclick=function (){//全选
    		for(var i=0;i<aCh.length;i++){//for循环将所有的选择框变为true
    		 aCh[i].checked=true;
    		 }
    		};
    	oBtn2.onclick=function (){//不选
    		for(var i=0;i<aCh.length;i++){//for循环将所有的选择框变为false
    		 aCh[i].checked=false;
    		 }
    		};
    	oBtn3.onclick=function (){//反选
    		for(var i=0;i<aCh.length;i++){//for循环将true变为false,将false变为true
    			if(aCh[i].checked==true){
    				aCh[i].checked=false;
    				}else{
    					aCh[i].checked=true;
    					}
    		 
    		 }
    		};
    	};
    </script>
    </head>
    
    <body>
    <input id="btn1" type="button" value="全选"/>
    <input id="btn2" type="button" value="不选"/>
    <input id="btn3" type="button" value="反选"/>
    <div id="div1">
    <input type="checkbox"/><br>
    <input type="checkbox"/><br>
    <input type="checkbox"/><br>
    <input type="checkbox"/><br>
    <input type="checkbox"/><br>
    <input type="checkbox"/><br>
    <input type="checkbox"/><br>
    <input type="checkbox"/><br>
    <input type="checkbox"/><br>
    <input type="checkbox"/><br>
    <input type="checkbox"/><br>
    <input type="checkbox"/><br>
    </div>
    </body>
    </html>
    
  • 相关阅读:
    SVN导入maven项目
    jQuery (二)DOM 操作
    jQuery (一)选择器
    jQuery 初识
    mysql的OFFSET实现分页
    MongoDB学习之(三)增删查改
    java安全性的一种简单思路
    java Spring 事务的初次使用与验证
    C#语法之匿名函数和Lambda表达式
    C#语法之委托和事件
  • 原文地址:https://www.cnblogs.com/lzzhuany/p/4596120.html
Copyright © 2020-2023  润新知