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”元素＆amp;你的代码应该是： -

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

希望它有所帮助。

如何使用javascript检查复选框？

3 个答案: