javascript - 勾选 "check-all"框时，勾选其他

Question

我的 html 页面上有一个表单，其中有一堆复选框作为选项。其中一个选项是“全选”，我希望在选中“全选”框后立即选中所有其他复选框(如果未选中)。我的代码看起来像这样:

<form method = "post" class = "notification-options">
    <input type = "checkbox" name = "notification-option" id = "all-post" onClick = "javascript:checkALL(this
);"> All Posts <br/>
    <input type = "checkbox" name = "notification-option" id = "others-post"> Other's Posts <br/>
    <input type = "checkbox" name = "notification-option" id = "client-post"> Cilent's Post <br/>
<input type = "checkbox" name = "notification-option" id = "assign-post"> Task Assigned </form>

Java 脚本:

<script type = "text/javascript">
    var $check-all = document.getElementbyId("all-post");
    function checkALL($check-all){
            if ($check-all.checked == true){
                document.getElementByName("notification-option").checked = true;
            }
        }
</script>

当我运行我的代码时没有任何反应

Answer 1

这里有一些指南。

1. type 属性不是必需的，可以省略。
2. JS 变量名不能包含连字符，一个拼写错误getElementById()
3. 你同时使用一个全局变量名作为参数您正在从在线处理程序传递 this。传递的参数隐藏了函数内全局。
4. if (checkAll.checked) 完成工作
5. getElementsByName() 中的拼写错误，gEBN() 返回一个 HTMLCollection，这是一个类似数组的对象。你必须遍历集合，并分别为每个元素设置checked。

固定代码:

<script>
    var checkAll = document.getElementById("all-post");
    function checkALL(){
        var n, checkboxes;
        if (checkAll.checked){
            checkboxes = document.getElementsByName("notification-option");
            for (n = 0; n < checkboxes.length; n++) {
                checkboxes[n].checked = true;
            }
        }
    }
</script>

您也可以省略 javascript: 伪协议(protocol)和在线处理程序的参数。