Question

我的html页面上有一个表单，其中有一些复选框作为选项。其中一个选项是＆＃34; check-all＆＃34;并且我希望所有其他复选框在未经检查的情况下进行检查，只要＆＃34; check-all＆＃34;框已选中。我的代码看起来像这样：

<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

你可以使用jQuery这样做：

$("#all-post").change(function(){
  $('input:checkbox').not(this).prop('checked', this.checked);      
});

这是JSfiddle

Answer 2

以下是一些指导原则。

type属性不需要，可以省略。
JS变量名不能包含连字符，输入错误 getElementById()
您在同一时间使用全局变量名作为参数你从在线处理程序传递this。传递的参数影响了功能全局。
if (checkAll.checked)完成工作
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:伪协议和来自在线处理程序的参数。

Answer 3

如果选中所有帖子复选框，则会设置check = true of others-post和client-post复选框

$("input[id$=all-post]").click(function (e) {
if ($("input[id$=all-post]").is(':checked')) {
$("input[id$=others-post]").prop('checked', true);
$("input[id$=client-post]").prop('checked', true);
}
});

Answer 4

检查是否先检查是否有任何复选框。

如果是这样，那么循环遍历它们并检查任何不是。
否则，循环浏览它们并取消选中任何已检查的

我在http://jsbin.com/witotibe/1/edit?html,output

有一个例子

Answer 5

http://jsfiddle.net/AX3Uj/

<form method="post" id="notification-options">
    <input type="checkbox" name="notification-option" id="all-post"> 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>

function checkAll(ev) {
    checkboxes = document.getElementById('notification-options').querySelectorAll("input[type='checkbox']");
    if (ev.target.checked === true) {
        for (var i = 0; i < checkboxes.length; ++i) {
            checkboxes[i].checked = true;
        }
    } else {
        for (var i = 0; i < checkboxes.length; ++i) {
            checkboxes[i].checked = false;
        }
    }
}

当＆＃34; check-all＆＃34;检查框，检查其他人

5 个答案: