sitelink1 | https://hianna.tistory.com/431 |
---|---|
sitelink2 | https://codepen.io/hianna/pen/wvWNjoz |
sitelink3 | |
sitelink4 | |
extra_vars4 | |
extra_vars5 | |
extra_vars6 |
<HTML>
<input type='checkbox'
name='animal'
value='dog'
onclick='getCheckedCnt()'/> 개
<input type='checkbox'
name='animal'
value='cat'
onclick='getCheckedCnt()'/> 고양이
<input type='checkbox'
name='animal'
value='rabbit'
onclick='getCheckedCnt()'/> 토끼
<div id='result'></div>
<JS>
function getCheckedCnt() {
// 선택된 목록 가져오기
const query = 'input[name="animal"]:checked';
const selectedElements =
document.querySelectorAll(query);
// 선택된 목록의 갯수 세기
const selectedElementsCnt =
selectedElements.length;
// 출력
document.getElementById('result').innerText
= selectedElementsCnt;
}