어제 오늘 내일

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

IT/Javascript

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

hi.anna 2020. 11. 14. 05:10

 

라디오 버튼 값을 가져와서 출력하는 2가지 방법을 소개합니다.

 

1. 라디오 클릭 시, 클릭한 값 바로 출력하기
2. 라디오 버튼 값을 선택한 후, 출력 버튼 클릭시 값 출력하기

 

먼저, 라디오 버튼을 생성하는 방법은 이전 포스팅을 참조하세요.

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

 

 

1. 라디오 클릭 시, 클릭한 값 바로 출력하기

<input type='radio'
       name='gender' 
       value='female' 
       onclick='getGender(event)'/>여성
<input type='radio' 
       name='gender' 
       value='male' 
       onclick='getGender(event)'/>남성
<div id='result'></div>
function getGender(event) {
  document.getElementById('result').innerText = 
    event.target.value;
}

 

 

(HTML, JS 탭을 클릭하여 두 소스를 모두 참조하세요.)

 

 <HTML> 

먼저 성별을 선택할 수 있는 radio 버튼을 만들었습니다.

각 성별의 value는 'female', 'male' 이네요.

각각의 라디오 버튼은 onclick 이벤트가 발생했을 때

getGender()라는 함수를 호출합니다.

이 함수에는 event 객체를 파라미터로 넘겨주었습니다.

(이 함수의 내용은 'JS' 탭을 클릭해서 확인하세요.)

그리고, 선택한 성별의 값을 출력할 수 있는 <div id='result'>를 하나 생성하였습니다.

 

 <JS> 

라디오 버튼이 클릭되면 호출되는 

getGender() 함수를 구현하고 있습니다.

라디오 버튼 클릭시 발생하는 event 객체를 파라미터로 받아서

event.target.value 값을 <div id='result'></div>에 출력해 주고 있습니다.

 

 

2. 라디오 버튼 값을 선택한 후, 출력 버튼 클릭시 값 출력하기

이번에는 라디오 버튼을 선택하고, '확인' 버튼을 클릭했을 때 선택된 값이 출력되는 예제입니다.

<input type='radio'
       name='gender' 
       value='female' />여성
<input type='radio' 
       name='gender' 
       value='male' />남성
<button onclick='getGender()'>확인</button>
<div id='result'></div>
function getGender() {
  
  const genderNodeList
  = document.getElementsByName('gender');
  
  genderNodeList.forEach((node) => {
    if(node.checked)  {
      document.getElementById('result').innerText
        = node.value;
    }
  }) 
}

 

(HTML, JS 탭을 클릭하여 두 소스를 모두 참조하세요.)

 

 <HTML> 

이번에는 '확인' 버튼을 클릭했을 때, 'getGender()' 함수를 호출하였습니다.

 

 <JS> 

document.getElementsByName('gender');

document.getElementsByName() 함수를 사용하여

라디오버튼 목록 Node를 모두 가져옵니다.

 

genderNodeList.forEach(...)

그리고 가져온 Node 목록을 순회하면서

Node(라디오 버튼)의 checked 값이 true인지 확인합니다.

(선택된 라디오 버튼의 checked 값은 true입니다.)

checked 값이 true인 경우, 해당 Node(라디오버튼)의 value 값을 출력해 주고 있습니다.

 

 

체크박스를 클릭해서 값을 가져오는 2가지 방법을 알아보았습니다.

 

 

반응형

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

[Javascript] 라디오 버튼 클릭하여, 텍스트 값 출력하기  (0) 2020.11.14
[Javascript] 라디오 버튼의 텍스트 클릭하여 항목 선택하기  (0) 2020.11.14
[Javascript] Caps Lock 키 활성화 여부 체크하기  (0) 2020.11.14
[Javascript] 배열에서 빈값 제거하기  (0) 2020.11.08
[Javascript] 배열 중복 제거하는 3가지 방법  (3) 2020.10.21
공유하기 링크
'IT/Javascript' Related Articles more
Comments