내 체크 박스 옆에있는 텍스트를 클릭 가능으로 설정하십시오.

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

이 아니면 (또는 텍스트 주위에 당신의 원래 스팬 요소없이) 라벨 내부에있는 확인란을 만 포함 할 수 있습니다

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