切换 PHP 表上的复选框

Question

我有一个表格，表格标题中有一个复选框，用于切换它下面的所有复选框。我已经在标题中的复选框中添加了一个 JavaScript 函数，但到目前为止它只选择了顶部的复选框（一个复选框）而不是所有的复选框。关于我做错了什么或要研究什么的任何建议或建议？

HTML 表头代码：

<thead>
  <tr>
    <th><center><input type="checkbox" value="" id="cbgroup1_master" onchange="togglecheckboxes(this,'cbgroup1')"></center></th>
    <th>Sender</th>
    <th>Receiver</th>
    <th>Subject</th>
    <th>Date</th>
  </tr>
</thead>

PHP表格代码：

$table .= '
          <tr>
            <td><center><input type="checkbox" id="cb1_1" class="cbgroup1"></center></td>
            <td><a href="pm_message.php?u='.$log_username.'&pmid='.$pmid.'" onclick="markRead(\''.$pmid.'\',\''.$sender.'\')">'.$sender.'</a></td>
            <td>'.$receiver.'</td>
            <td>'.$subject.'</td>
            <td>'.$time.'</td>
          </tr>';

Javascript 代码：

function togglecheckboxes(master,cn){
    var cbarray = document.getElementsByClassName(cn);
    for(var i = 0; i < cbarray.length; i++){
        var cb = document.getElementById(cbarray[i].id);
        cb.checked = master.checked;
    }
}

Answer 1

问题是您为所有复选框设置了相同的 ID (cb1_1)（这在 HTML 中无效） ID 在页面中应该是唯一的。因此，它只选择第一个找到的复选框并丢弃其余的。要解决此问题，请为复选框提供唯一 ID。

$table .= '
          <tr>
            <td><center><input type="checkbox" id="cb1_'.$pmid.'" class="cbgroup1"></center></td>
            <td><a href="pm_message.php?u='.$log_username.'&pmid='.$pmid.'" onclick="markRead(\''.$pmid.'\',\''.$sender.'\')">'.$sender.'</a></td>
            <td>'.$receiver.'</td>
            <td>'.$subject.'</td>
            <td>'.$time.'</td>
          </tr>';

注意：我只是将 $pmid 用作示例，您应该根据您的场景使用适当的值

Answer 2

我发现你的代码有 2 个问题。

（可能）对多个 DOM 元素使用相同的 id

您的 PHP 代码表明您可能正在使用循环来创建复选框，但您对所有复选框使用相同的 id “cb1_1”。 与此处的 @atul 相同。

选择不正确的复选框元素 由于您对所有输入使用相同的 id， var cb = document.getElementById(cbarray[i].id);always 返回相同的元素。解决它的一种方法是使用 @atul

提供的解决方案

另一种方法是重写你的javascript如下：

function togglecheckboxes(master,cn){
    var cbarray = document.getElementsByClassName(cn);
    for(var i = 0; i < cbarray.length; i++){
        var cb = cbarray[i];
        cb.checked = master.checked;
    }
}

您的 cbarray 已经是您的复选框数组，因此当您已经使用 cbarray[i] 调用 document.getElementById(cbarray[i].id) 来获取元素时，它是多余的（又名无用）。