javascript - 切换 PHP 表上的复选框

Question

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

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 为例，你应该根据你的场景使用适当的值