JavaScript チェックボックスの全選択イベントと逆選択イベントの実装の詳細な説明-jsチュートリアル-php.cn

JavaScript チェックボックスの全選択イベントと逆選択イベントの実装の詳細な説明

黄舟

リリース： 2017-09-28 10:43:47

オリジナル

2027 人が閲覧しました

この記事では、主にチェックボックス全選択イベントと逆選択イベントの JavaScript 実装を詳しく紹介します。興味のある方は参考にしてください。

この記事の例は、JavaScript 実装を共有することを目的としています。チェックボックス全選択イベントの具体的なコードは以下の通りです

<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>

ログイン後にコピー

以上がJavaScript チェックボックスの全選択イベントと逆選択イベントの実装の詳細な説明の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。