快捷導(dǎo)航

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

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

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

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

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

思路：

1、獲取元素
2、給全選不選反選添加點(diǎn)擊事件
3、用for循環(huán)checkbox
4、把checkbox的checked設(shè)置為true即實(shí)現(xiàn)全選
5、把checkbox的checked設(shè)置為false即實(shí)現(xiàn)不選
6、通過(guò)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>

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

您可能感興趣的文章: