如何使用javascript檢查複選框？

Question

我已將圖像和複選框的像下面

<form name="food_type_form method="post" action="proc.php"> 
<img src="images/type_indian.jpg" alt="Select Indian food" /> 
<input type="checkbox" name="food_type[]" value="indian" />Indian 

<img src="images/type_chinese.jpg" alt="Select Chinese food" /> 
<input type="checkbox" name="food_type[]" value="chinese" />Chinese 

<img src="images/type_japanese.jpg" alt="Select Japanese food" /> 
<input type="checkbox" name="food_type[]" value="japanese" />Japanese/Sushi 

<a href="#" onclick="document.food_type_form.submit()">Show Restaurants >></a> 
</form> 

當點擊圖像，我想檢查圖像下方的複選框。如果複選框有不同的名稱，我們可以用document.myform.box1.checked = true;

但如何做到這一點，以檢查它是否是一組複選框

編輯1 注：<LABEL>將無法​​正常工作，因爲我想提交表單點擊圖片。

Answer 1

將圖像包裝在label元素中。

Answer 2

如果使用<label>，默認行爲是調用的動作是孩子，所以你可以簡單的包裹每一個，就像這樣：

<label> 
    <img src="images/type_indian.jpg" alt="Select Indian food" /> 
    <input type="checkbox" name="food_type[]" value="indian" />Indian 
</label> 

Give it a try here，這使得點擊圖像，該複選框或用於選擇的文本，使其更加可用。

Answer 3

您將需要 「label」 元素，在這個例子中&你的代碼應該是這樣的： -

<form name="food_type_form method="post" action="proc.php"> 

<label for="indian"> 
<img src="images/type_indian.jpg" alt="Select Indian food" /> 
<input type="checkbox" name="food_type[]" id="indian" value="indian" />Indian 
</label> 

<label for="chinese"> 
<img src="images/type_chinese.jpg" alt="Select Chinese food" /> 
<input type="checkbox" name="food_type[]" id="chinese" value="chinese" />Chinese 
</label> 

<label for="japanese"> 
<img src="images/type_japanese.jpg" alt="Select Japanese food" /> 
<input type="checkbox" name="food_type[]" id="japanese" value="japanese" />Japanese/Sushi 
</label> 

<a href="#" onclick="document.food_type_form.submit()">Show Restaurants >></a> 
</form> 

希望它能幫助。