Сделать текст смежным с моим флажком clickable

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 определяет идентификатор соответствующего флажка. Щелчок по метке проверяет или снимает флажок.

Демо: 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/