JS實現(xiàn)CheckBox復(fù)選框全選、不選或全不選功能

更新時間：2021年04月11日 15:11:32 投稿：lijiao

CheckBox控件就是我們一般所說的復(fù)選框，通常用于某選項的打開或關(guān)閉，如一次性處理多個產(chǎn)品，或?qū)ξ恼碌膭h除、產(chǎn)品的下架等處理，一條一條的點顯然有一些麻煩，如果能每一行放一個checkbox，然后統(tǒng)一處理就好辦的多了，需要的朋友可以參考下

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

CheckBox復(fù)選框JS實現(xiàn)全選、不選、全不選功能，很簡單，具體內(nèi)容如下

思路：

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

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>

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

您可能感興趣的文章: