码迷,mamicode.com
首页 > Web开发 > 详细

js---复选框(全选,不选,反选)demo1--

时间:2017-01-13 22:00:14      阅读:169      评论:0      收藏:0      [点我收藏+]

标签:name   rip   lang   demo   window   content   nload   str   size   

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" lang="en">
	<span style="font-size: 24px;">javascript 案例 全选 不选  反选</span><br /> 
	<head>
		<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
		<title>全选 不选  反选</title>
	</head>
	<script>  
window.onload=function (){  
  
   var oBtn1=document.getElementById("Btn1");  
   var oBtn2=document.getElementById("Btn2");  
   var oBtn3=document.getElementById("Btn3");  
   var oDiv=document.getElementById("Ben");  
   var oInp=oDiv.getElementsByTagName("input");  
     
   oBtn1.onclick=function(){     //全选  
        //oInp[0].checked=true;   // checked : 布尔值  false  true;  
         for(var i=0; i<oInp.length ; i++){  
         oInp[i].checked=true;    
        }    
   };   
   oBtn2.onclick=function(){    //不选  
        for(var i=0; i<oInp.length ; i++){  
              oInp[i].checked=false;  
        }    
   };     
   oBtn3.onclick=function(){    //反选  
        for(var i=0; i<oInp.length ; i++){  
            if(oInp[i].checked==true){  
              
                oInp[i].checked=false;  
            }  
            else{  
                oInp[i].checked=true;  
            }  
        }    
   };  
};  
  
</script>  
	<body>
	<input id="Btn1" type="button" value="全选" /><br />  
    <input id="Btn2" type="button" value="不选" /><br />  
    <input id="Btn3" type="button" value="反选" /><br />  
    <div id="Ben">  
<input type="checkbox"  /><br />  
<input type="checkbox" /><br />  <!--复选框   checked  选中-->  
<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>

  

js---复选框(全选,不选,反选)demo1--

标签:name   rip   lang   demo   window   content   nload   str   size   

原文地址:http://www.cnblogs.com/ipetergo/p/6283873.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!