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

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해도 선택되도록 했다면

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