어제 오늘 내일

[Javascript] 라디오 버튼 클릭하여, 텍스트 값 출력하기 본문

IT/Javascript

[Javascript] 라디오 버튼 클릭하여, 텍스트 값 출력하기

hi.anna 2020. 11. 14. 21:46

 

지난번에는 라디오 버튼을 설명하는 텍스트를 클릭할 경우에도,

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

그리고, 라디오 버튼이 선택된 경우 그 값(value)을 가져와서 출력하는 방법도 알아보았습니다.

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

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

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

 

 

이번에는 라디오 버튼을 <Label> 태그와 연결하고,

라디오 버튼을 클릭하면 <Label> 태그에 정의된 텍스트 값을 가져와서 출력하는 방법을 알아보도록 하겠습니다.

 

<input type='radio'
       name='gender' 
       value='female'
       id='f'
       onclick='getRadioText(event)'/>
<label for='f'>여성</label>

<input type='radio' 
       name='gender' 
       value='male' 
       id='m'
       onclick='getRadioText(event)'/>
<label for='m'>남성</label>

<div id='result'></div>
function getRadioText(event)  {
  const radioId = event.target.id;
  const query = 'label[for="'+ radioId + '"]'
  const text = document.querySelector(query).innerText;
  
  document.getElementById('result').innerText = text;
}

 

 

(HTML, JS 탭을 클릭하여 두 가지 코드를 모두 확인하세요.)

 

 <HTML> 

라디오버튼과 텍스트는,

<Label> 태그와 'for' 속성을 사용하여 연결되어 있고,

라디오 버튼을 클릭하면 'getRadioText(event)' 함수를 호출합니다.

 

 <JS> 

const radioId = event.target.id;

선택된 라디오 버튼의 ID입니다.

선택된 라디오 버튼의 ID(radioId)를 찾았으니,

이 ID로 <Label> 태그의 'for' 속성값이 'radioId'인 element를 찾고,

그 element의 텍스트값을 찾으면 됩니다.

 

const query = 'label[for="' + radioId + '"]';

여기서는 이 query를 querySelector()의 파라미터로 전달하였습니다.

이 qeury로 'label' 태그 중, 'for' 속성이 'radioId'인 element를 찾을 수 있습니다.

 

const text = document.querySelector(query).innerText;

document.querySelector() 함수는

DOM에서 query 조건을 만족하는 element 중 가장 첫번째 element를 리턴합니다.

위에서 작성한 query를 querySelector()의 파라미터로 전달하면

조건에 맞는 <Label> element 하나를 찾을 것이고, 

우리는 그 element의 텍스트 값을 가져와야 하므로

마지막에 innerText를 붙여주었습니다.

 

 

<Label> 태그로 연결된 라디오 버튼의 텍스트 값을 가져와서 출력하는 방법을 알아보았습니다.

 

 

반응형

'IT > Javascript' 카테고리의 다른 글

[Javascript] 체크박스에 체크된 항목 개수 구하기  (0) 2020.11.15
[Javascript] 체크박스(checkbox)에 선택 된 값 출력하기  (5) 2020.11.14
[Javascript] 라디오 버튼의 텍스트 클릭하여 항목 선택하기  (0) 2020.11.14
[Javascript] 라디오 버튼(radio) 값 가져와서 출력하기  (1) 2020.11.14
[Javascript] Caps Lock 키 활성화 여부 체크하기  (0) 2020.11.14
공유하기 링크
'IT/Javascript' Related Articles more
Comments