[英]select/deselect all check boxes on click a single check box by javascript
我有一个表格,其中我有两个表有一些行。
我希望当我单击选中/取消选中所有复选框时,复选框下面的复选框应检查该特定表
我有一个javascript函数,但当我点击两个中的任何一个选择/取消选中所有复选框,而不是两个表复选框都被选中。 我想只检查特定表的所有复选框。
使用Javascript:
<script type="text/javascript">
checked=false;
function checkedAll (frm1) {
var aa= document.getElementById('frm1');
if (checked == false)
{
checked = true
}
else
{
checked = false
}
for (var i =0; i < aa.elements.length; i++)
{
aa.elements[i].checked = checked;
}
}
//function for subscription month
</script>
我的HTML是......
<form action="" method="post" name="frm1" id="frm1">
<table>
<tr><th>Cause List</th></tr>
<?php
foreach($arr as $month)
{
?>
<tr><td><input type="checkbox" name="causelist_month" /><?php echo $month; ?></td></tr>
<?php } ?>
<tr><th><input type="checkbox" name="causelist_month" id="causelist_month" onclick="checkedAll (frm1);"/>select all/unselect all</th></tr>
</table>
<table>
<tr><th>Subscription</th></tr>
<?php
foreach($arr as $month)
{
?>
<tr><td><input type="checkbox" name="subscription_month"/><?php echo $month; ?></td></tr>
<?php } ?>
<tr><th><input type="checkbox" name="subscription_month" id="subscription_month" onclick="checkedAll2 (frm2);"/>select all/unselect all</th></tr>
</table>
</form>
请帮我。
使用jQuery 1.6+,你可以做到
$('.check-all').click(function () {
var checked = this.prop('checked');
this.closest('table').find(':checkbox').prop('checked', checked);
}
check-all
是两个“select / unselect all”复选框所具有的类。
您的代码存在一些问题。 最重要的一点是,您是一个单独的检查变量,以跟踪两种表单的状态。 那不行。 而是使用其他复选框的“checkall”复选框的状态。
让我们假设你真的有两种形式(如果你不能使用两种形式,见下文):
<form action="" method="post" name="frm1" id="frm1">
<table>
<tr><th>Cause List</th></tr>
<!-- ... -->
<tr>
<th>
<input type="checkbox" name="causelist_month" id="causelist_month" onclick="checkedAll.call(this);"/>select all/unselect all
</th>
</tr>
</table>
</form>
<form action="" method="post" name="frm2" id="frm2">
<table>
<tr><th>Subscription List</th></tr>
<!-- ... -->
<tr>
<th>
<input type="checkbox" name="subscription_month" id="subscription_month" onclick="checkedAll.call(this);"/>select all/unselect all
</th>
</tr>
</table>
</form>
请注意,我将内联事件处理程序更改为checkedAll.call(this)
。
然后你的函数应该是这样的:
function checkedAll() {
// this refers to the clicked checkbox
// find all checkboxes inside the checkbox' form
var elements = this.form.getElementsByTagName('input');
// iterate and change status
for (var i = elements.length; i--; ) {
if (elements[i].type == 'checkbox') {
elements[i].checked = this.checked;
}
}
}
当然,有一些方法可以改进代码。 例如,如果取消选择表中的其他复选框,则可能需要添加逻辑以取消选中相应的“全选”复选框。
我还建议阅读quirksmode.org上关于事件处理的精彩介绍 ,以了解绑定事件处理程序的其他方法。
如果您不能使用两个表单,则必须找到另一个祖先作为参考点(即从中选择所有复选框)。 在这种情况下, table
元素似乎更可取。 您必须遍历文档,直到找到它。 内联点击事件处理程序仍然必须更改为checkedAll.call(this)
才能使其工作:
function checkedAll() {
// this refers to the clicked checkbox
// find closest table
var parent = this.parentNode;
do {
parent = parent.parentNode;
} while(parent.nodeName !== 'TABLE');
// find all checkboxes inside the checkbox' table
var elements = parent.getElementsByTagName('input');
// ... continue like shown above
}
您的代码正在更改frm1
内的所有复选框。 将两个表保存在两个单独的div中,并将相应的divs id传递给checkedAll
函数。
<form action="" method="post" name="frm1" id="frm1">
<div id="div1">
<table>
<tr>
<th>Cause List</th>
</tr>
<?php foreach($arr as $month) { ?>
<tr><td><input type="checkbox" name="causelist_month" />
<?php echo $month; ?></td></tr>
<?php } ?>
<tr>
<th>
<input type="checkbox" name="causelist_month" id="causelist_month" onclick="checkedAll (div1);"/>select all/unselect all</th></tr> </table>
</div>
<div id="div2">
// Second table
</div>
</form>
尝试这个 -
$(input[type=checkbox]').attr('checked', 'checked');
HTML -
<div><label><input id="ChkAll" type="checkbox" onchange="javascript:CheckedAll();" /><span>SelectAll</span></label></div>
<div id="DivChk ">
<label><input type="checkbox" /><span>First</span></label>
<label><input type="checkbox" /><span>2nd</span></label>
<label><input type="checkbox" /><span>3rd</span></label>
<label><input type="checkbox" /><span>4th</span></label>
</div>
我的Jquery -
function CheckedAll(){
if ($('#ChkAll').is(':checked')) {
$('#DivChk input[type=checkbox]').attr('checked', 'checked');
}
else {
$('#DivChk input[type=checkbox]:checked').removeAttr('checked');
}
}
通过Javascript -
function CheckedAll(){
if (document.getElementById('ChkAll').checked) {
for(i=0; i<document.getElementsByTagName('input').length;i++){
document.getElementsByTagName('input')[i].checked = true;
}
}
else {
for(i=0; i<document.getElementsByTagName('input').length;i++){
document.getElementsByTagName('input')[i].checked = false;
}
}
}
尝试这个
function checkedAll(frm1) {
var chk = document.getElementsByTagName('input');
for(var i=0; i < chk.length; i++) {
if(chk[i].type == 'checkbox') {
chk[i].checked = frm1.checked;
}
}
}
或者你可以在这里找到更多细节。
试试这个DEMO
var checked=false;
function checkedAll () {
var aa = document.getElementsByName("causelist_month");
checked = document.getElementById('causelist_month').checked;
for (var i =0; i < aa.length; i++)
{
aa[i].checked = checked;
}
}
function checkedAll2() {
var aa = document.getElementsByName("subscription_month");
checked = document.getElementById('subscription_month').checked;
for (var i =0; i < aa.length; i++)
{
aa[i].checked = checked;
}
}
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.