使用javascript或jquery檢查/取消選中全部或部分複選框？

Question

我有一個頁面，我在頁面頂部有一個表單，用戶可以選擇某些城市進行過濾。到目前爲止，它看起來像這樣：

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

這現在工作得很好。只要頁面加載，所有城市都會被檢查，並且用戶可以選中/取消選中他們想要的任何內容。然而，現在，我想在城市上方添加一些框/按鈕，並在其中包含州名，這樣如果我只想過濾伊利諾斯州的城市，我可以點擊/取消選中該選項，它將檢查/取消選中芝加哥，迪凱特和昆西。我也想放兩個新按鈕，一個選擇全部，一個全部清除。 所以兩個新的按鈕看起來是這樣的：

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

任何幫助嗎？ 謝謝

Answer 1

清除與jQuery所有選擇的複選框是非常簡單的：

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

這是說對與名稱選擇的每個元素「的城市[]」，刪除選定的狀態。

Answer 2

一個簡單的谷歌搜索將產生很多結果。嘗試搜索「一次檢查多個複選框」。

在此處找到一個示例：http://www.sanwebe.com/2014/01/how-to-select-all-deselect-checkboxes-jquery