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

Posted

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了js---复选框(全选,不选,反选)demo1--相关的知识,希望对你有一定的参考价值。

<!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--的主要内容,如果未能解决你的问题,请参考以下文章

js 判断 复选框全选全不选反选必选一个

js复选框实现全选全不选反选

Vue实现单选、全选和反选

js-03课-02 复选框全选 , 全不选, 反选

js实现复选框的全选全不选和反选

jQuery js实现checkbox复选框全选全不选反选 PHP