选择“全部复选框”
Select All Checkbox
我有一个网页,返回一个表/表单的搜索结果。我想有一个选择所有复选框,这将选择所有复选框的搜索结果。我用于显示结果的代码如下:
<form action="noJavaScript.php" name="theForm" method="post">
<table style="border: 1px solid black" RULES=ALL FRAME=VSIDES>
<th> </th><th>Order #</th><th>Inspector</th><th>Reference #</th><th>Client Name</th><th>Property Address</th><th>City</th><th>State</th><th>Zip</th><th>Inspection Date</th>
<?php
while ($row = mysql_fetch_assoc($result))
{
echo '<tr><td>';
echo '<input type="checkbox" name="selected[]" value="'.$row['order_number'].'"/>';
echo '</td>';
foreach ($row as $key => $value)
echo '<td>'.htmlspecialchars($value).'</td>';
echo '</tr>';
}
?>
</table>
<input type="submit" name="submit" value="Edit/Modify Order" onClick="document.theForm.action='modify.php'">
<input type="submit" name="submit" value="Clone Order" onClick="document.theForm.action='clone.php'">
<input type="submit" name="submit" value="Delete Order" onClick="document.theForm.action='deleteorder.php'">
<input type="submit" name="submit" value="Archive Order" onClick="document.theForm.action='archive.php'">
</form>
我已经尝试使用以下函数:
<script type="text/javascript"
<!--
function SetAllCheckBoxes(FormName, FieldName, CheckValue)
{
if(!document.forms[FormName])
return;
var objCheckBoxes = document.forms[FormName].elements[FieldName];
if(!objCheckBoxes)
return;
var countCheckBoxes = objCheckBoxes.length;
if(!countCheckBoxes)
objCheckBoxes.checked = CheckValue;
else
// set the check value for all check boxes
for(var i = 0; i < countCheckBoxes; i++)
objCheckBoxes[i].checked = CheckValue;
}
// -->
</script>
按钮像这样:
<input type="button" onclick="SetAllCheckBoxes('theForm', 'myCheckbox', true);" value="Check All">;
但是我不能让它工作
为每个复选框输入添加一个类。
echo '<input type="checkbox" name="selected[]" value="'.$row['order_number'].'" class="yourclass" />';
然后在javascript中遍历文档中的所有输入字段并检查它们是否同时具有type="checkbox"
和class="yourclass"
。并将它们全部设置为CHECKED!
您可以使用jquery以更简单的方式完成此操作
$("form input:checkbox").attr('checked','true');
var form = document.getElementsById('form_id');
var checkBoxes = form.getElementsByTagName('input');
for (var i in checkBoxes)
{
if (checkBoxes[i].type=="checkbox")
checkBoxes[i].checked = true;
}
最好的解决方案是使用Jquery脚本
/*Unik Checkbox to mark/desmark other checkboxes*/
<input type="checkbox" onclick="selectAllCheckBoxes(this)" id="checkBoxUnik"/>
/*Several other Checkboxes inside loop*/
<input type="checkbox" onclick="unselectCheckBoxUnik()" class="checkBoxInLoop" />
<script>
function selectAllCheckBoxes(obj){
$('input:checkbox:not(:disabled).checkBoxInLoop').prop('checked', jQuery(obj).prop('checked'));
}
function unselectCheckBoxUnik(){
/*first you verify if the quantity of checkboxes equals number of checkboxes*/
a = $('input:checkbox:not(:disabled).checkBoxInLoop:checked').size();
b = $('input:checkbox:not(:disabled).checkBoxInLoop').size();
/*if equals, mark a checkBoxUnik*/
((a == b)? $('#checkBoxUnik').prop("checked", true) : $('#checkBoxUnik').prop("checked", false));
}
</script>
相关文章:
- 复选框/单选按钮-添加所选项目的总价
- 动态添加复选框和输入框 jQuery
- 使用javascript提交表单并从字段/单选框/复选框/文本区域获取数据
- Bootstrap多选-在复选框后添加图像
- Javascript重复复选框复选框
- JavaScript 复选框全选、取消全选、反转选择
- 我无法禁用带有复选框的文本框
- 高级表单提交-单选、复选框和重定向
- 如何发布单选和复选框选择?表单由php和js处理
- 如何知道JqGrid多选'全选'复选框被选中
- jQuery:根据另一个复选框设置选择框的值
- 根据更改事件上的复选框从文本框中获取值
- 如何使用Javascript清除基于复选框的文本框
- 样式为 -webkit-外观的单选按钮:复选框:Chrome 中的不确定状态
- 棱角多复选框 全选
- 如何勾选 1 复选框以选中 html 表格中的所有复选框
- 如何使用 rails3-jquery-autocomplete 更新复选框/单选按钮
- 按id选择页面中的全部/取消选择所有复选框
- 在选中“全部”时,如何取消选中相关复选框?复选框并取消选择“全部”;复选框中的复选框
- JavaScript "检查全部"与单选和复选框