复选框的全选和取消全选

最新推荐文章于 2024-04-11 13:33:03 发布

花花的果子

最新推荐文章于 2024-04-11 13:33:03 发布

阅读量199

点赞数

本文链接：https://blog.csdn.net/huahuadeguozi/article/details/100187230

版权

复选框的全选和取消全选

调用checkbox中的checked属性，返回一个Boolean类型，true为选中。

根据name获取所有元素

getElementsByName() 方法可返回带有指定名称的对象的集合。

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>复选框的全选和取消全选</title>
    </head>
    <body>
        <script type="text/javascript">
            window.onload = function () {
            //根据name获取所有元素
                var aihaoElm = document.getElementsByName("aihao");
                var firstElm = document.getElementById("firstCkb");

                firstElm.onclick = function () {

                    for (var i=0; i <aihaoElm.length;i++ ) {
                        aihaoElm[i].checked = firstElm.checked
                    }
                }
                for (var i=0; i <aihaoElm.length;i++ ) {
                    aihaoElm[i].onclick = function () {
                        var countNum = 0;
                        for (var i=0; i <aihaoElm.length;i++) {
                            if (aihaoElm[i].checked) {
                                 countNum++;
                            }


                        }

                        firstElm.checked=(countNum==aihaoElm.length);

                    }
                }

            }
        </script>
        <input type="checkbox" id="firstCkb"/><br>
        <input type="checkbox" name="aihao" value="somke"/>抽烟<br>
        <input type="checkbox" name="aihao" value="drink"/>喝酒<br>
        <input type="checkbox" name="aihao" value="tt"/>烫头<br>
    </body>
</html>