使我的复选框旁边的文字可点击

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/