我有一个表格,表格标题中有一个复选框,用于切换它下面的所有复选框。我已经在标题中的复选框中添加了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;
}
}
答案 0 :(得分:2)
问题是您为所有复选框设置了相同的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作为示例,您应该根据您的场景使用适当的值
答案 1 :(得分:1)
我发现你的代码存在两个问题。
(可能)对多个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]
来获取元素是多余的(也就是无用的)。