JS實作CheckBox複選框全選、不選或全不選功能_javascript技巧-js教程-PHP中文網

JS實作CheckBox複選框全選、不選或全不選功能_javascript技巧

WBOY

發布： 2016-05-16 15:16:24

原創

1814 人瀏覽過

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>

登入後複製

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