javascript - 通过javascript单击单个复选框时选择/取消选择所有复选框

Question

我有一个表单，其中有两个包含一些行的表。

我希望当我点击全选/取消全选复选框时，该复选框下的复选框应该针对该特定表格进行检查

我有一个有效的 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>

请帮助我。

Answer 1

使用 jQuery 1.6+，你可以做到

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

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