选择所有复选框不起作用答案

【问题标题】：Selecting all checkboxes not working选择所有复选框不起作用
【发布时间】：2014-07-01 10:15:27
【问题描述】：

我必须在相应区域下显示zone names 和regions。我在每个区域的右侧以及区域的一侧都有用于选择区域和区域的复选框。当我检查特定的zone 时，我只需要检查该特定区域下的所有regions。我正在显示数据库中的区域数据和相应的区域。

我的php代码是这样的：

//显示区域名称

 <table cellpadding="15" cellspacing="10">
 <?php
 $last_route = '';  
 $getbus = mssql_query("SELECT brd.BusrouteID,BusRoute,brd.AreaID,br.BusRoute,a.AreaName_1 FROM dbo.Acc_BusRouteDetail brd JOIN dbo.PRTL_BusRoute br ON br.busrouteid = brd.busrouteid JOIN dbo.GEN_Area a ON a.areaid = brd.areaid ORDER BY br.busroute, a.areaname_1");
 while($data_getbus = mssql_fetch_array($getbus)){ 
   if($last_route != $data_getbus['BusRoute']) { 
       $last_route = $data_getbus['BusRoute'];//last_route contain zone names
       echo '<tr><td><label for="'.$data_getbus[BusrouteID].'"><h4>'.$last_route.'</h4>  </label></td><td><input type="checkbox" class="zone_check" id="'.$data_getbus[BusrouteID].'" name="zone[]" value="'.$data_getbus[BusrouteID].'"></td></tr><tr>';
     }
      echo '<td><label for="'.$data_getbus[BusrouteID]."_".$data_getbus[AreaID].'">'.$data_getbus['AreaName_1'].'</label></td>
     <td><input type="checkbox" id="'.$data_getbus[BusrouteID]."_".$data_getbus[AreaID].'" name="arealist[]" value="'.$data_getbus[BusrouteID]."_".$data_getbus[AreaID].'"  >'."</td></tr>";
  } 

?>
 </table>

我的 Jquery 是这样的：

$(".zone_check").change(function(){
          var checkboxes = $(this).children().find(':checkbox');
          if($(this).prop('checked')) {
          checkboxes.prop('checked', true);
        } else {
          checkboxes.prop('checked', false);
        }
    });

【问题讨论】：

var checkboxes = $(this).children().find(':checkbox') 不正确，因为this 是不能有子元素的复选框
猜测您没有提供正确的 HTML。尝试使用$(this).closest('table').find(':checkbox[name="arealist[]"]') 而不是$(this).children().find(':checkbox')
可以分享一下生成的html吗
@Satpal 当我使用你的代码时，它会在我检查单个区域时选择所有区域。我只需要检查该特定区域下的区域
@ArunPJohny 我已经编辑了 html

标签： php jquery checkbox

【解决方案1】：

请参阅下面的 JS 代码，您将了解如何检查和取消选中所有复选框

$(".zone_check").change(function(){
          var checkboxes = $(this).parent().find('.calendar-checkbox');
          if($(this).prop('checked')) {
              checkboxes.each(function(){
                  $(this).prop('checked', true);
              });
        } else {
           checkboxes.each(function(){
                  $(this).prop('checked', false);
              });
        }
    });

请看Demo

【讨论】：

【解决方案2】：

看起来您的目标是下一行的复选框，所以试试

$(".zone_check").change(function () {
    $(this).closest('tr').next().find(':checkbox').prop('checked', this.checked);
});

【讨论】：

它的工作。但问题是它只检查一个区域，因为它正在寻找单行。但如果该区域有多个区域，它只检查单个区域。跨度>
我会给图片@Arun p Johny
@Techy 然后试试$(this).closest('tr').nextUntil(':has(.zone_check)').find(':checkbox').prop('checked', this.checked);
如果所有区域复选框都未选中，我还需要取消选中区域名称复选框。您能帮帮我吗
@Arun P Johny 当我取消选中区域列表中的任何元素时，相应区域未选中，而其他区域则在该特定区域中选中