[Html] javascript로 체크박스의 글자(text)를 클릭해도 체크되도록 하기

체크박스의 작은 부분을 클릭하는 게 간혹 힘들다고 느껴지는 때가 있습니다.

특히, 사용자 입장에서 많은 편리함을 제공하는 요즘같은 때에는 더욱 불편하게 느껴지고, 운영자의 무심함을 탓하기도 합니다.

조금만 더 신경써 줬으면 하고요.

 

아래처럼 작성하는 게 체크박스의 전통적인 방법인데요.

<input type=”checkbox” id=”hintYn” /> 힌트 포함</label>
<input type=”checkbox” id=”imageUrl” /> 이미지 포함</label>
<input type=”checkbox” id=”explanation” /> 설명 포함</label>

 

아래처럼 정말 조금만 신경쓰면 체크박스의 영역을 텍스트로 확장할 수 있고 사용자에게 편리함을 더할 수 있습니다.

<label for=“hint“><input type=”checkbox” id=“hint” /> 힌트 포함</label>
<label for=“image“><input type=”checkbox” id=“image” /> 이미지 포함</label>
<label for=“explanation“><input type=”checkbox” id=“explanation” /> 설명 포함</label>

 

커서모양을 손바닥 모양으로 바꿔주면 조금 더 클릭할 때의 느낌이 좋습니다.

<label for=”hint” style=”cursor:pointer“><input type=”checkbox” id=”hint” /> 힌트 포함</label>
<label for=”image” style=”cursor:pointer“><input type=”checkbox” id=”image” /> 이미지 포함</label>
<label for=”explanation” style=”cursor:pointer“><input type=”checkbox” id=”explanation” /> 설명 포함</label>

 

체크박스 뿐 아니라 라디오 버튼도 위와 같은 방법으로 사용하시면 됩니다.

type=”radio” 이렇게 type만 바꿔주시면 됩니다.

 

 

부트스트랩으로도 위와 같은 방식을 만들수가 있습니다.

부트스트랩은 체크박스를 버튼같이 사용할수도 있네요. 아래를 참고하세요.

2016/01/27 - [프로그래밍 언어/부트스트랩(Bootstrap)] - [bootstrap] 부트스트랩 – 체크박스와 라디오버튼 (checkbox & radio button)

2016/02/08 - [프로그래밍 언어/부트스트랩(Bootstrap)] - [bootstrap] 부트스트랩 – 버튼 상태 제어하기 – 체크박스 버튼