INPUT label - 인풋 라벨태그

텍스트나 이미지를 클릭해도 체크가됩니다.

<style type='text/css'>LABEL { cursor:pointer; }</style>

<label for="check_01"><input type="checkbox" id="check_01" />라벨 1</label> <br /><br />
<label for="check_02"><input type="checkbox" id="check_02" />라벨 2</label> <br /><br />
<label for="check_03"><input type="checkbox" id="check_03" />라벨 3</label><br /><br />
<label for="check_04" style="width:90px; height:30px; background:url(http://oxtag.com/html/img/banner3.gif)"><input type="checkbox" id="check_04" /></label><br /><br />
<input type="checkbox" id="check_05" /><label for="check_05" style="width:90px; height:30px; background:url(http://oxtag.com/html/img/banner3.gif)"></label>

텍스트대신 image형태로 처리하게 되면 IE의 경우는 label본연의 기능이 동작하지 않는 버그가 있습니다.

이럴 경우 간단한 Javascript를 통해서 label 태그의 기능을 사용할수 있습니다. (IE일경우만 동작하는 스크립트 입니다.)

<label for="check_06" onclick="if(navigator.appVersion.indexOf('MSIE') != -1){check_06.click()}">
<input id="check_06" type="checkbox">
<img src="http://oxtag.com/html/img/banner3.gif" alt="check_06" style="cursor:pointer">
</label>
 

이벤트를 이용한 이미지체크
<input type="checkbox" /><img src='http://oxtag.com/html/img/banner3.gif' onclick='previousSibling.checked=previousSibling.checked!=true?true:false;'/>

TEXT 박스 같은곳에 사용하면 포커스를  줄 수도 있습니다.
참고로 radio 박스나 checkbox와 같이 사용할 경우에는 HIDEFUCUS 라는 프로퍼티를 주시면 label 클릭시 label에 focus가 와서 점선처럼 생기는 것을 막을 수 있습니다.
있는것과 없는것을 비교해 보시면 금방 이해가 가실겁니다.
<input type="checkbox" id="id_check_01"><label for="id_check_01" HIDEFOCUS>라벨01</label>
<input type="checkbox" id="id_check_02"><label for="id_check_02" >라벨02</label>