recherche

Maison >interface Web >js tutoriel >Implémenter la sélection multiple et la sélection inverse des cases à cocher dans js

Implémenter la sélection multiple et la sélection inverse des cases à cocher dans js

一个新手
一个新手original
2017-10-07 11:40:491939parcourir

<!DOCTYPE html><html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <script>

            window.onload = function(){
                selAll = document.getElementById("selAll");
                hobbys = document.getElementsByName("hobby");
                fx = document.getElementById("fx");                //全选事件
                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>
        <input type="checkbox" name="" id="selAll" />全选        
        <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>

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!

Déclaration：
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn
Article précédent：Js implémente la sélection complète frontale et la sélection inverséeArticle suivant：Js implémente la sélection complète frontale et la sélection inversée

Articles Liés

Voir plus