复选框的全选和反选实现

来源：互联网发布：淘宝联盟手机版如何赚钱编辑：程序博客网时间：2024/05/17 03:30

复选框的全选和反选，简单实用
这里写图片描述

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

阅读全文

0 0