check/uncheck all or some checkboxes with javascript or jquery?

Question

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

If you post a question that is about a topic much Q&A material exists already you should make clear which and why the existing Q&A does not work in your case. — hakre, Dec 26 '14 at 15:18
Those text and checkbox inputs need labels. See http://www.w3.org/TR/WCAG20-TECHS/H44.html — danielnixon, Dec 27 '14 at 02:39

score 1 · Answer 1 · answered Dec 26 '14 at 15:10

1

Clearing all selected checkboxes with jQuery is pretty simple:

$("[name='cities[]']:checked").prop("checked", false)

This says for each element that is selected with the name "cities[]", remove the selected status.

answered Dec 26 '14 at 15:10

Zarathuztra

3,215
1
20
34

Thanks, I was thinking select inputs for some reason – Zarathuztra Dec 26 '14 at 15:15
Still, thanks for the tip! – Zarathuztra Dec 26 '14 at 15:16

score 0 · Answer 2 · answered Dec 26 '14 at 15:10

0

A simple Google search will yield many results for this. Try searching up "check multiple checkboxes at once."

One example is found here: http://www.sanwebe.com/2014/01/how-to-select-all-deselect-checkboxes-jquery

answered Dec 26 '14 at 15:10

Sheldon Scott

741
1
7
21

check/uncheck all or some checkboxes with javascript or jquery?

2 Answers2