3

我有一个表格，其中有两个带有一些行的表格。 在此处输入图像描述

我希望当我单击选择/取消选择所有复选框时，该复选框下的复选框应该检查该特定表

我有一个可以工作的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>

请帮我。

4

6 回答 6

1

使用 jQuery 1.6+，你可以做到

$('.check-all').click(function () {
    var checked = this.prop('checked');   
    this.closest('table').find(':checkbox').prop('checked', checked);
}

wherecheck-all是两个“全选/取消全选”复选框所具有的类。

于 2013-07-23T06:14:46.530 回答
1

您的代码有几个问题。最重要的是，您是一个检查变量，用于跟踪两种表单的状态。那是行不通的。相反，对其他复选框使用“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
}
于 2013-07-23T06:37:15.420 回答
0

尝试这个 - 

$(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');
     }
   }

使用 Jquery 试试这个

通过 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;
         }
     }
   }

尝试这个

于 2013-07-23T06:18:54.843 回答
0

试试这个演示

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;
}
}
于 2013-07-23T07:07:22.643 回答
0

您的代码正在更改内部的所有复选框frm1。将两个表保存在两个单独的 div 中，并将相应的 div id 传递给checkedAllfunction 。 

<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>
于 2013-07-23T06:15:53.167 回答
0

尝试这个

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;
    }
  }
}

或者您可以在此处找到更多详细信息。

于 2013-07-23T06:32:27.323 回答