ホームページ > ウェブフロントエンド > jsチュートリアル > チェックボックスの完全選択、選択なし、および逆選択を実装するための js メソッド_javascript スキル

チェックボックスの完全選択、選択なし、および逆選択を実装するための js メソッド_javascript スキル

WBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWB
リリース: 2016-05-16 16:15:09
オリジナル
1286 人が閲覧しました

この記事の例では、js でチェックボックスの完全選択、非選択、および逆選択を実装する方法を説明します。皆さんの参考に共有してください。具体的な分析は次のとおりです。

1. アイデア:

1. 要素を取得します

2. すべて選択、選択解除、または選択を反転するためのクリック イベントを追加します

3. for ループチェックボックスを使用します

4. チェックボックスを true に設定して、すべてを選択します

5. チェックボックスのチェックを false に設定して選択を解除します

6. if 判定により、checked が true で選択状態に設定されている場合は、checked が false で選択されていない場合は、checked が true で選択済みに設定されます。

2. HTML コード:

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

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

ログイン後にコピー

3. js コード:

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

25

26

27

28

29

30

31

32

33

34

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

ログイン後にコピー

この記事が皆様の JavaScript プログラミング設計に役立つことを願っています。

関連ラベル:
ソース:php.cn
このウェブサイトの声明
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。
最新の問題
ノード Js + JS 入力 = document.getElementById
から 1970-01-01 08:00:00
0
0
0
js addClassが機能しない
から 1970-01-01 08:00:00
0
0
0
javascript - jsコードをPythonに変換
から 1970-01-01 08:00:00
0
0
0
jsファイルのコードが見つかりません
から 1970-01-01 08:00:00
0
0
0
人気のチュートリアル
詳細>
最新のダウンロード
詳細>
ウェブエフェクト
公式サイト
サイト素材
フロントエンドテンプレート