复选框的全选和反选

来源：互联网发布：网络新技术有哪些编辑：程序博客网时间：2024/06/05 09:08

很普通的一个复选框的全选和反选，没有什么可以强调的地方

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

阅读全文

0 0