관리 메뉴

행이네

label for를 사용할 때 radio/checkbox의 Click 오류? 본문

plming/HTML-Web

label for를 사용할 때 radio/checkbox의 Click 오류?

행이™ 2016. 1. 29. 17:17

HTML상의 컨트롤들은 id와 name으로 구분할 수 있는데...

여러개의 컨트롤중에서 하나나 여럿을 선택해야 하는

radio 와 checkbox

컨트롤의 제목이나 이름을 나타내는 label for를 사용할 때

사소한 오류(?)를 만들어 낼 수도있다.

 

radio와 checkbox의 동그라미와 네모를 클릭하지 않고

설명글을 Click 해도 선택/체크되도록 하기 위해서

label for를 사용하는데...

 

아래처럼 코딩을 하게 되면 기능상의 오류가 발생한다.

 <input type="radio" id="radioid" name="radioid" value="radiovalue1">
 <label for="radioid">라디오1</label>
 <input type="radio" id="radioid" name="radioid" value="radiovalue2">
 <label for="radioid">라디오2</label>

 

라디오2 글자를 Click하면...

희망(!)과는 다르게...

라디오1 이 선택된다...^^;

 

무엇이 문제인가?

 

Form Submit을 처리하기 위해서 name은 일치시켜야 하고

jQuery를 사용하기 위해서 id도 일치시켜야 할 것 같지만...?

굳이 그리 하지 않아도 된다.

 

문제는... label for에서 특정 컨트롤을 for속성에 컨트롤id를 넣기 때문이다.

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

 

 <input type="radio" id="radioid1" name="radioid" value="radiovalue1">
 <label for="radioid1">라디오1</label>
 <input type="radio" id="radioid2" name="radioid" value="radiovalue2">
 <label for="radioid2">라디오2</label>

 

글자 Click으로 값을 선택하는 것은 해결되었다.

 

 

이제 Submit을 처리하기 위한

Validation은 어떻게?

 

일반적으로는 이렇게 사용할 수 있지만 (id가 같았으니)

 if( typeof $("#radioid:checked").val() == "undefined" ) {

 

두번째 방식으로 코드를 바꿨다면 이렇게 처리할 수 있다.

 if( typeof $(":radio[name=radioid]:checked").val() == "undefined" ) {

 

 

radio의 동그라미나

checkbox의 네모를

정확하게 Click하는 경우엔 전혀 문제가 되지 않지만

편의를 위해 글자를 Click해도 선택되도록 했다면

요롷게 처리해주는게 깔끔할 듯 하다.

 

 

2 Comments
  • 프로필사진 김상현 2021.01.06 13:45 사랑합니다....... 저에게 구원을 주셨습니다......
    PC버전 모바일버전 두가지에 input 버튼 label 써서 label된 사진, 버튼들에 클릭시 input에 체크되도록 만들고있엇는데
    모바일이 되는것을 확인하고 PC버전을 만들고나니 갑자기 모바일이 안되어서 왜 그런지 도통 이해를 못하고 별 짓거리를 다하고있었는데 이 글을 보고 모바일과 PC버전 iput id에 차이를 주니 해결되었습니다...
    감사합니다 복 과하게 받으세요!!!!!!!!
  • 프로필사진 행이™ 2021.02.21 17:46 신고 도움이 되셨다니 다행이네요. ^^
댓글쓰기 폼