Question

我正在尝试使我的复选框旁边的文字可点击。为什么这段代码不起作用？

<form name="f1">
<input type="checkbox" name="name[]" value="1">
<span onClick="name[0].checked=(! name[0].checked);">Add whipped cream to your drink (add $0.50)</span>
<input type="checkbox" name="name[]" value="2">
<span onClick="name[1].checked=(! name[1].checked);">Add whipped cream to your drink (add $0.50)</span>
</form>

Answer 1

“为什么此代码不起作用？”

因为您不能按名称将复选框称为类似的数组。复选框的名称是一个字符"name[]"，其中包含[]个字符。浏览器不认为这与数组有关。您仍然可以通过该名称引用元素的一种方式是：

onClick="document.forms.f1['name[]'][0].checked=!document.forms.f1['name[]'][0].checked;"

演示：http://jsfiddle.net/CYCqr/2/

...但我真的不建议这样做。完全删除JS并使用标签元素会更容易：

<form name="f1">
<input id="cb1" type="checkbox" name="name[]" value="1">
<label for="cb1">Add whipped cream to your drink (add $0.50)</label>
<input id="cb2" type="checkbox" name="name[]" value="2">
<label for="cb2">Add whipped cream to your drink (add $0.50)</label>
</form>

每个标签的for属性指定相关复选框的ID。单击标签会选中或取消选中该复选框。

演示：http://jsfiddle.net/CYCqr/

或者你可以在标签内包含复选框（在文本周围有或没有原始的span元素）：

<form name="f1">
<label><input type="checkbox" name="name[]" value="1">Add whipped cream to your drink (add $0.50)</label>
<label><input type="checkbox" name="name[]" value="2">Add whipped cream to your drink (add $0.50)</label>
</form>

演示：http://jsfiddle.net/CYCqr/1/

使我的复选框旁边的文本可单击

1 个答案: