选择所有复选框不起作用

Question

我必须在相应区域下方显示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);
        }
    });

Answer 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

Answer 2

看起来您要定位下一行的复选框，请尝试

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