DIV CSS 佈局教程網

CheckBox控件表明一個特定的狀態（即選項）是選定 (on，值為1) 還是清除 (off，值為0)。在應用程序中使用該控件為用戶提供“True/False”或“yes/no”的選擇。因為 CheckBox 彼此獨立工作，所以用戶可以同時選擇任意多個 CheckBox，進行選項組合。

CheckBox復選框JS實現全選、不選、全不選功能，很簡單，具體內容如下

思路：

• 1、獲取元素
• 2、給全選 不選 反選添加點擊事件
• 3、用for循環checkbox
• 4、把checkbox的checked設置為true即實現全選
• 5、把checkbox的checked設置為false即實現不選
• 6、通過if判斷，如果checked為true選中狀態的，就把checked設為false不選狀態，如果checked為false不選狀態的，就把checked設為true選中狀態。
  

html代碼： 
  

 <input type="button" value="全選" id="sele"/>
  <input type="button" value="不選" id="setinterval"/>
  <input type="button" value="反選" id="clear"/>
   <div id="checkboxs">
    <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 />
    <input type="checkbox"/><br />
    <input type="checkbox"/><br />
    <input type="checkbox"/><br />
    <input type="checkbox"/><br />
</div>

js代碼：

<script>
window.onload=function(){

var sele=document.getElementById('sele');//獲取全選
var unsele=document.getElementById('setinterval');//獲取不選
var clear=document.getElementById('clear');//獲取反選
var checkbox=document.getElementById('checkboxs');//獲取div
var checked=checkbox.getElementsByTagName('input');//獲取div下的input
//全選
sele.onclick=function(){
for(i=0;i<checked.length;i++){
checked[i].checked=true
}
}

//不選
unsele.onclick=function(){
for(i=0;i<checked.length;i++){
checked[i].checked=false
}
}
//反選
clear.onclick=function(){
for(i=0;i<checked.length;i++){
if(checked[i].checked==true){
checked[i].checked=false
}
else{
checked[i].checked=true
}
}
}



}
</script>

以上所述就是本文的全部內容了，希望大家能夠喜歡。