前端設計之複選框與反選

在一些表單,以及許多註冊登錄時都會用到此類的選擇框,

首先、其中運用到了window.onload = function(){};

其次、運用到onclick 點擊事件;

那麼就來看一下如何編寫的吧!

這裏寫圖片描述

<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>
發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章