[Javascript] 라디오 버튼의 텍스트 클릭하여 항목 선택하기

 

지난 번에는 HTML과 Javascript를 사용하여

라디오 버튼을 생성하고

선택된 라디오 버튼의 값을 가져오는 방법을 알아보았습니다.

[HTML] input 태그로 라디오버튼(radio) 만들기

[Javascript] 라디오 버튼(radio) 값 가져와서 출력하기

 

 

라디오 버튼을 정확히 클릭해야만 항목이 선택되는 문제

<input type='radio'
       name='gender' 
       value='female' />여성
<input type='radio' 
       name='gender' 
       value='male' />남성

그런데, 이전에 설명한 방법으로 라디오 버튼을 생성하면

정확하기 라디오 버튼을 클릭해야만 해당 항목이 선택됩니다.

라디오 버튼 옆의 텍스트 문자열을 클릭했을 때도,

라디오 버튼의 항목이 선택되면 좋을 텐데요.

 

여기서는,

라디오 버튼 옆의 텍스트를 클릭했을 때도, 

라디오 버튼의 항목이 선택되도록 하는 방법을 알아보겠습니다.

 

 

라디오 버튼의 텍스트 클릭하여, 항목 선택할 수 있도록 구현하기

 <Label> 사용하기 1 

<input type='radio'
       name='gender' 
       value='female'
       id='f'/>
<label for='f'>여성</label>

<input type='radio' 
       name='gender' 
       value='male' 
       id='m'/>
<label for='m'>남성</label>

특정 라디오 버튼과 라디오 버튼을 설명하는 텍스트를 연결하기 위해서

<label> 태그와 'for' 속성을 사용할 수 있습니다.

 

위 코드를 보면

라디오 버튼을 설명하는 <label>을 하나 지정하였고,

<label>에 'for' 속성을 지정하고,

'for' 속성 값으로 연결할 라디오 버튼의 'id'를 지정하였습니다.

이렇게 하면, 특정 라디오 버튼과 라디오 버튼을 설명하는 text 값이 연결됩니다.

이제, 텍스트를 클릭해도 라디오 버튼이 클릭이 되는 것도 확인할 수 있습니다.

 

 <Label> 사용하기 2 

위의 예제와 같이,

라디오 버튼과 텍스트를 연결할 때 'for' 속성을 사용할 수도 있고,

'for' 속성을 사용하지 않고,

<label> 태그 안에 라디오 버튼을 중첩시켜서 사용할 수도 있습니다.

<label>
  <input type='radio'
         name='gender' 
         value='female'
         id='f'/>
  여성
</label>

<label>
  <input type='radio' 
         name='gender' 
         value='male' 
         id='m'/>
  남성
</label>

위 코드는 '<Label> 사용하기 1'의 코드와 똑같이 작동합니다.

여기서는 <label> 태그에 'for' 속성을 사용하지 않은 것을 확인 할 수 있습니다.

 

---

이번 포스팅에서는 <label> 태그와 'for' 속성을 사용하여

라디오 버튼을 설명하는 텍스트를 클릭했을 때도,

해당 속성이 선택되도록 하는 방법을 알아보았습니다.