어제 오늘 내일

[Javascript] 체크박스(checkbox)에 선택 된 값 출력하기 본문

IT/Javascript

[Javascript] 체크박스(checkbox)에 선택 된 값 출력하기

hi.anna 2020. 11. 14. 23:35

 

시작하기 전에 체크 박스를 만드는 방법을 잘 모른다면,

먼저 아래 포스팅을 참조하세요.

[HTML] inpu 태그로 체크박스(checkbox) 만들기

 

 

체크박스(checkbox)에 선택 된 값 출력하기

1. 체크박스를 선택 했을 때, 선택한 값만 출력하기
2. 체크박스를 선택 했을 때, 선택된 모든 값 출력하기
3. '확인' 버튼을 눌렀을 때 선택된 값 출력하기

 

1. 체크박스를 선택 했을 때, 선택한 값을 출력하기

체크박스에 클릭 이벤트가 발생했을 때, 선택된 값만 출력하는 예제입니다.

<input type='checkbox'
       name='animal' 
       value='dog'
       onclick='getCheckboxValue(event)'/> 개

<input type='checkbox' 
       name='animal' 
       value='cat' 
       onclick='getCheckboxValue(event)'/> 고양이

<div id='result'></div>
function getCheckboxValue(event)  {
  let result = '';
  if(event.target.checked)  {
    result = event.target.value;
  }else {
    result = '';
  }
  
  document.getElementById('result').innerText
    = result;
}

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

 

 <HTML> 

name='animal'인 체크박스를 생성하였고,

각각의 체크박스에 클릭 이벤트가 발생하면 'getCheckboxValue(event)' 함수를 호출합니다.

 

 <JS> 

getCheckboxValue() 함수는

이벤트가 발생한 체크박스의 checked 값이 true이면,

이벤트가 발생한 체크박스의 value 값을 가져와서 화면에 출력합니다.

 

 

2. 체크박스를 선택 했을 때, 선택된 모든 값 출력하기

1번의 경우는, 클릭 이벤트가 발생한 해당 체크박스의 값만 출력합니다.

이번 예제는 전체 체크박스 중 선택된 모든 체크박스 값을 출력하는 예제입니다.

<input type='checkbox'
       name='animal' 
       value='dog'
       onclick='getCheckboxValue()'/> 개

<input type='checkbox' 
       name='animal' 
       value='cat' 
       onclick='getCheckboxValue()'/> 고양이

<div id='result'></div>
function getCheckboxValue()  {
  // 선택된 목록 가져오기
  const query = 'input[name="animal"]:checked';
  const selectedEls = 
      document.querySelectorAll(query);
  
  // 선택된 목록에서 value 찾기
  let result = '';
  selectedEls.forEach((el) => {
    result += el.value + ' ';
  });
  
  // 출력
  document.getElementById('result').innerText
    = result;
}

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

 

 <HTML> 

name='animal'인 체크박스를 생성하였고,

각각의 체크박스에 클릭 이벤트가 발생하면 'getCheckboxValue()' 함수를 호출합니다.

이번에는, 파라미터로 event를 넘겨주지 않았습니다.

 

 <JS> 

선택된 목록 가져오기

전체 체크박스에서 선택된 목록 전체를 가져오기 위해서

document.querySelectorAll() 함수를 사용하였습니다.

이 함수는 query문을 파라미터로 받아서,

query문을 만족하는 모든 element를 포함하는 NodeList를 리턴합니다.

 

const query = 'input[name='animal']:checked';

위 예제에서 사용된 이 query문은

전체 <input> element 중 name='animal'이고, checked='true'인 element를 검색합니다.

 

선택된 목록에서 value 찾기

querySelectorAll() 함수가 리턴한 값은 element 목록이기 때문에

반복문을 사용하여 각각의 element에 접근하여 value값을 가져옵니다.

 

출력

마지막으로 앞에서 찾은 

체크박스에 선택된 모든 value 값을 화면에 출력합니다.

 

 

3. '확인' 버튼을 눌렀을 때 선택된 값 출력하기

<input type='checkbox'
       name='animal' 
       value='dog'/> 개
<input type='checkbox' 
       name='animal' 
       value='cat' /> 고양이
<button onclick='getCheckboxValue()'>확인</button>

<div id='result'></div>
function getCheckboxValue()  {
  // 선택된 목록 가져오기
  const query = 'input[name="animal"]:checked';
  const selectedEls = 
      document.querySelectorAll(query);
  
  // 선택된 목록에서 value 찾기
  let result = '';
  selectedEls.forEach((el) => {
    result += el.value + ' ';
  });
  
  // 출력
  document.getElementById('result').innerText
    = result;
}

'확인' 버튼을 눌렀을 때, 모든 값을 출력하는 예제입니다.

 

 <HTML> 

이전 예제에서는 각각의 체크박스를 클릭할 때마다 결과를 출력했기 때문에,

각각의 체크박스에 onclick 이벤트가 걸려 있었습니다.

이번 예제는 '확인' 버튼을 클릭했을 때 결과를 출력하기 때문에

버튼에만 onclick 이벤트를 추가하였습니다.

 

 <JS> 

Javascript의 'getCheckboxValue()' 함수는 

이전 예제와 똑같습니다.

 

선택된 체크박스의 값들을 가져와서 출력하는

몇가지 방법을 알아보았습니다.

 

반응형

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

[Javascript] 체크박스 전체 선택 / 전체 해제 구현하기  (2) 2020.11.22
[Javascript] 체크박스에 체크된 항목 개수 구하기  (0) 2020.11.15
[Javascript] 라디오 버튼 클릭하여, 텍스트 값 출력하기  (0) 2020.11.14
[Javascript] 라디오 버튼의 텍스트 클릭하여 항목 선택하기  (0) 2020.11.14
[Javascript] 라디오 버튼(radio) 값 가져와서 출력하기  (1) 2020.11.14
공유하기 링크
'IT/Javascript' Related Articles more
Comments