check/uncheck all or some checkboxes with javascript or jquery? [duplicate]

This question already has an answer here:

• How to implement “select all” check box in HTML? 15 answers

I have a page where I have a form at the top of the page that a user can select certain cities to filter on. So far it looks like this:

  <?php 

 $start=_GET['start'];
 $end=_GET['end'];

 if(empty($start)){ 
  $start=date("Ym");
}
if(empty($end)){
$end=date("Ym");
 }


$places=array();
if(!empty($_GET['cities'])){
  foreach($_GET['cities'] as $loc){
array_push($places,$loc);
 }
}else{
 $places=('CHI','DET','LA','NYC','DAL','SPR','PHI','PITTS','HST','KMZ','SCR','BUF','ALB','UTI','DEC','QNC','SNF');
 }

?>

//html
<form method='GET'>
START:<input type='text' name='start' value= '<?$start?>'>
END: <input type='text' name='end' value='<?$end?>'>
<input type='checkbox' name='cities[]' value='CHI' <?= (in_array('CHI', $places)) ? 'checked' : ''; ?> >CHICAGO
<input type='checkbox' name='cities[]' value='DET' <?= (in_array('DET', $places)) ? 'checked' : ''; ?> >DETROIT
<input type='checkbox' name='cities[]' value='LA' <?= (in_array('LA', $places)) ? 'checked' : ''; ?> >LOS ANGELES
<input type='checkbox' name='cities[]' value='NYC' <?= (in_array('NY', $places)) ? 'checked' : ''; ?> >NEW YORK
<input type='checkbox' name='cities[]' value='DALLAS' <?= (in_array('DAL', $places)) ? 'checked' : ''; ?> >DALLAS
<input type='checkbox' name='cities[]' value='SPR' <?= (in_array('SPR', $places)) ? 'checked' : ''; ?> >SPRINGFIELD
<input type='checkbox' name='cities[]' value='PHI' <?= (in_array('PHI', $places)) ? 'checked' : ''; ?> >PHILADELPHIA
......rest of the cities....
 <input type='submit' value='Filter'>
  </form>

 <?
 $SQL="SELECT NAME,
    ID,
    PHONE,
    EMAIL,
    EVENT,
    LOCATION
  FROM SHOPPERS
 WHERE LOCATION IN ('".implode("', '", $places)."')
 AND EVENT BETWEEN '{$start}' and '{$end}'
 AND ID BETWEEN '25687' AND '28050'
 ";

 //and then fetch array to print out results...
.....
?>

This works just fine now. As soon as the page loads, all the cities are checked and the user can check/uncheck whatever they want. However, now, I want to add some boxes/buttons right above the cities with the state names in them, so that if I just want to filter on cities in Illinois, I can click/unclick that and it would check/uncheck Chicago, Decatur and Quincy. I also want to put two new buttons, one to select all and one to clear all. So the two new buttons would look something like this:

  <input type="button" class="check" value="Select All" />
  <input type="button" class="check" value="Clear" />

Any help? Thank you