使我的複選框旁邊的文字可點擊

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/