切換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); 總是返回相同的元素。 解決它的方法是使用@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已經是你的復選框數組了，所以調用document.getElementById(cbarray[i].id)來獲取你已經使用cbarray[i]的元素是多余的（也就是無用的）。