* 아래처럼 input id 값과 label for 값을 "check"로 연결해 주면 어떻게 될까.
1
2
3
4
|
<fieldset>
<input id="check" type="checkbox">
<label for="check"> 체크하기 </label>
</fieldset>
|
cs |
* label 태크로 감싸준 텍스트와 checkbox가 연동된다. 고로 텍스트를 클릭했을 때 체크박스 체크하기가 연동됨.
*이 과정에 힘입어 텍스트 대신 이미지로 처리할 수도 있다. 이미지를 라벨로 감싸기만 하면 되니까!!
1
2
3
4
|
<fieldset>
<input id="check2" type="checkbox">
<label for="check2"> <img src="이미지주소"> </label>
</fieldset>
|
cs |
* 이미지를 누르면 체크박스에 체크됨. (이미지는 아무거나 상관 없다. 만들기 귀찮아서 만들어진 걸 가져온 것뿐;)
*IE 하위 버전에선 이미지가 작동 안 할 수도 있다고 하는데, 그럴 땐 이렇게 해주면 된다고 합니다.
1
2
3
4
5
6
|
<fieldset>
<input id="check3" type="checkbox">
<label for="check3" onclick="if(navigator.appVersion.indexOf('MSIE') != -1){check3.click()}">
<img src="이미지주소">
</label>
</fieldset>
|
cs |
+ 사족 : 체크박스와 텍스트 혹은 이미지의 위치가 미친싸람 널뛰듯 널뛰는 것은 스타일로 정리하지 않았기 때문. 아무튼 이 내용을 이해했다면 나중에 이미지 안에 체크 박스를 넣고 그 이미지 자체를 클릭했을 때 체크가 되도록 만들수도 있다는 거. 아마도. 아마도? 아마도 ㅋㅋㅋㅋ
+ IE 코딩러의 적. 대원수. IE를 쓰되 제발 막 IE8 쓰고 그르지 마여... 최소 10이상은 써줘.... 제발.... ㅠㅠㅋㅋ