如何使用javaScript實(shí)現(xiàn)復(fù)選框全選反選事件

發(fā)布時(shí)間：2021-04-13 13:40:06 來源：億速云閱讀：176 作者：小新欄目：web開發(fā)

這篇文章將為大家詳細(xì)講解有關(guān)如何使用javaScript實(shí)現(xiàn)復(fù)選框全選反選事件，小編覺得挺實(shí)用的，因此分享給大家做個(gè)參考，希望大家閱讀完這篇文章后可以有所收獲。

具體內(nèi)容如下

代碼

<html>
<head>
 <meta charset="utf-8">
 <meta name="viewport" content="initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
 <title></title>

 <script>

  window.onload=function(){
   var selAll=document.getElementById("selAll");
   var hobbys=document.getElementsByName("hobby");
   var fx=document.getElementById("fx");    
   var myClick=document.getElementById("xz");

   function myClick(){     
    alert("hello");
   }


   //全選事件
   selAll.onclick=function(){
    if(selAll.checked == true){
     for ( var i=0; i<hobbys.length; i++) {
      hobbys[i].checked=true;
     }
    }else{
     for ( var i=0; i<hobbys.length; i++) {
      hobbys[i].checked=false;
     }
    }


   }

   //反選事件
   fx.onclick=function(){

    for (var i=0; i<hobbys.length; i++) {
     var b=hobbys[i];
     if (b.checked == true) {
      b.checked=false
     }else{
      b.checked=true;
     }
    }

   }
  }
 </script>
</head>
<body>

 <span onclick="myClick()" id="xz"><input type="checkbox" id="selAll"/>全選</span>
 <button id="fx">反選</button></br>
 <input type="checkbox" name="hobby" />羽毛球
 <input type="checkbox" name="hobby"/>繪畫
 <input type="checkbox" name="hobby"/>唱歌
 <input type="checkbox" name="hobby"/>跳舞
</body>
</html>

關(guān)于“如何使用javaScript實(shí)現(xiàn)復(fù)選框全選反選事件”這篇文章就分享到這里了，希望以上內(nèi)容可以對大家有一定的幫助，使各位可以學(xué)到更多知識，如果覺得文章不錯(cuò)，請把它分享出去讓更多的人看到。

向AI問一下細(xì)節(jié)

如何使用javaScript實(shí)現(xiàn)復(fù)選框全選反選事件

猜你喜歡

最新資訊

相關(guān)推薦

相關(guān)標(biāo)簽