• 목차

<label>

<input type="checkbox" id="checkboxId" value="checkValue">
<label for="checkboxId">체크박스</label>

• <label> 태그는 사용자 인터페이스(UI) 요소의 라벨(label)을 정의할 때 사용한다.
• for 속성을 사용하여 다른 요소와 결합할 수 있다.
  • 사용자가 마우스로 해당 텍스트를 클릭할 경우 <label> 요소와 연결된 요소를 곧바로 선택할 수 있어 사용자의 편의성을 높일 수 있다.
  • 라벨의 텍스트를 클릭하여도 체크 박스의 네모가 선택된다.
• 이때 for 속성 값은 결합하고자 하는 요소의 id 속성 값과 같아야 한다.

checkbox id 오류

// id가 같음으로 오류 발생
<input type="checkbox" id="checkId" name="checkName" value="checkValue1">
<label for="checkId">체크박스1</label>
<input type="checkbox" id="checkId" name="checkName" value="checkValue2">
<label for="checkId">체크박스2</label>

• label for를 사용할 때 동일한 id 의 radio 와 checkbox 가 있으면 오류가 발생한다.

• ex) 체크박스2 텍스트를 클릭하면 체크박스1이 선택된다.

  • 네모를 정확하게 클릭하는 경우는 정상 작동

• 해결은 checkbox의 id를 달리 해줘야 한다.

• submit 을 처리하기 위한 validation 은 id가 아닌 name 을 통해 처리하였다.

  // 변경 전(id가 동일할 때)
  if( typeof $("#checkId:checked").val() == "undefined" ) {}
  
  // 변경 후
  if( typeof $("radio[name=checkName]:checked").val() == "undefined" ) {}