如何使用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> 

希望它能帮助。