javascript - 单击按钮时选择所有复选框

Question

我在尝试通过单击按钮选择所有复选框时遇到了很多麻烦。

当我创建一个消息系统时，我使用 PHP while 循环来生成所有复选框，并且没有任何问题。

当我单击全部检查按钮时，它只会检查第一个复选框，由于某种原因，下面的任何其他复选框都会被忽略。

我使用的代码如下:

<button type='button' name='btn-check' id='btn-check' class='btn btn-default btn-sm' onclick='check()'>Check All</button>

<input type='checkbox' name='cb_delete[]' id='cb_delete' value='$mID'>

<script type="text/javascript">
   function check() {
     document.getElementById("cb_delete").checked = true;
     $("#btn-check").attr('disabled','disabled');
     $("#btn-uncheck").removeAttr('disabled','disabled');
     $("#btn-delete").removeAttr('disabled','disabled');
   }
</script>

我尝试将 getElementById 更改为 getElementByType、ByName 等，但仍然没有成功。任何帮助将不胜感激。

Answer 1

原因(很可能)是您为每个复选框使用相同的id属性。
The id attribute是一个标识符，因此在整个文档中必须是唯一的。

尝试使用class而不是id:

<button type='button' name='btn-check' id='btn-check' class='btn btn-default btn-sm'>Check All</button>

<input type='checkbox' name='cb_delete[]' class='cb_delete' value='$mID'>

脚本:

$("#btn-check").click(function(){
    $(this).prop('disabled', true);
    $("#btn-uncheck").removeAttr('disabled');
    $('.cb_delete').prop('checked', true);
});

<小时/>

附注 - It's not a good practice to use onClick attribute