Selecting all checkboxes not working

Question

I have to display zone names and the regions coming under the respective zone. I have checkboxes on the right side of each zone and also on the side of regions for selecting the zones and areas. When I check a particular zone ,I need to check all the regions coming under that particular zone only. I am displaying the zone data and corresponding areas from the database.

My php code is like this:

//displaying zone name

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

My Jquery is like this:

$(".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

Please see below JS code you will get idea how you can check and unckeck all checkboxes

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

Please see Demo

Answer 2

Looks like you are targeting the checkboxes in the next row, so try

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