Javascript 在PHP表上切换复选框
我有一个表格,表格标题中有一个复选框,用于切换其下方的所有复选框。我已经在标题中的复选框中添加了一个JavaScript函数,但到目前为止,它只选择顶部的复选框(一个复选框),而不是所有复选框。关于我做错了什么或应该研究什么,有什么建议吗 HTML表格标题代码:Javascript 在PHP表上切换复选框,javascript,php,html,checkbox,Javascript,Php,Html,Checkbox,我有一个表格,表格标题中有一个复选框,用于切换其下方的所有复选框。我已经在标题中的复选框中添加了一个JavaScript函数,但到目前为止,它只选择顶部的复选框(一个复选框),而不是所有复选框。关于我做错了什么或应该研究什么,有什么建议吗 HTML表格标题代码: <thead> <tr> <th><center><input type="checkbox" value="" id="cbgroup1_master" onchang
<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>';
$table.='
“.$receiver。”
“.$subject。”
“.$时间。”
';
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;
}
}
功能切换复选框(主控,cn){
var cbarray=document.getElementsByClassName(cn);
对于(var i=0;i
问题是您为所有复选框(在HTML中无效)设置了相同的ID(cb1\u 1),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>';
$table.='
“.$receiver。”
“.$subject。”
“.$时间。”
';
注意:我只是使用$pmid作为一个示例,您应该根据您的场景使用适当的值 (可能)对多个DOM元素使用相同的id 您的PHP代码表明您可能正在使用一个循环来创建复选框,但对所有复选框“cb1_1”都使用相同的id。 与这里的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;
}
}
功能切换复选框(主控,cn){
var cbarray=document.getElementsByClassName(cn);
对于(var i=0;i
您的cbarray已经是您的复选框数组,因此当您已经使用cbarray[i]
获取元素时,调用document.getElementById(cbarray[i].id)
来获取元素是多余的(也称为无用的) “我的天哪!”菲特费尔南德斯说!我忘了!我刚刚用js代码更新了这个问题。谢谢你提醒我!!您觉得使用jQuery舒服吗?我有一点使用它的经验(我玩过一些教程),但我不怕弄脏我的手@菲特费尔南德斯非常感谢你,也感谢阿图尔。我真的应该考虑选择表id。谢谢你引起我的注意。现在一切都好了!伟大的学习经历@米莉卡很高兴为你效劳。祝你编程之旅好运!