ID :   PW :   JOIN FIND

Rusty paradise

[HTML] label + input 결합 (체크박스를 텍스트/이미지와 연결)

by Daily posted May 22, 2017

 

* 아래처럼 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이상은 써줘.... 제발.... ㅠㅠㅋㅋ

?

Coding&Design

html5, css, Jquey, JavaScript, photoshop, IIIustratot, zb4, XE

List of Articles
한 번만 읽어주세요 :D 1 file
» [HTML] label + input 결합 (체크박스를 텍스트/이미지와 연결) 2017.05.22 12673
목록
Board Pagination Prev 1 Next
/ 1