• 选择框


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

    <!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>
    
  • 相关阅读:
    [Canvas]RPG游戏雏形 (地图加载,英雄出现并移动)
    [Canvas]计时表/秒表
    [Canvas]新版箴言钟表
    [Canvas]用透明PNG图在背景上画前景能不遮挡背景
    [Canvas]动态背景
    [Canvas]更多的球
    [Canvas]碰撞球 增加小球间碰撞检测
    [Canvas]碰撞球
    [Canvas]越来越近的女孩
    [Canvas]走近的女孩
  • 原文地址:https://www.cnblogs.com/lzzhuany/p/4596120.html
Copyright © 2020-2023  润新知