1

我正在尝试使与我的复选框相邻的文本可点击。为什么这段代码不起作用？

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

1 回答 1

3

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

因为您不能按名称将复选框称为这样的数组。复选框的名称是"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/

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

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

于 2013-04-06T11:02:45.800 回答