코딩 공부/HTML
html 체크박스 하나만 선택되게 하기
hg_96
2022. 1. 3. 16:40
html
<ul class="" style="">
<li>
<input type="checkbox" name="nameval" onclick='checkOnlyOne1(this)' value="0" id="1">
<label for="1">전체</label>
</li>
<li>
<input type="checkbox" name="nameval" onclick='checkOnlyOne1(this)' value="1" id="2">
<label for="2">선택1</label>
</li>
<li>
<input type="checkbox" name="nameval" onclick='checkOnlyOne1(this)' value="2" id="3">
<label for="3">선택2</label>
</li>
<li>
<input type="checkbox" name="nameval"onclick='checkOnlyOne1(this)' value="3" id="4">
<label for="4">선택3</label>
</li>
<li>
<input type="checkbox" name="nameval" onclick='checkOnlyOne1(this)' value="4" id="5">
<label for="5">기타</label>
</li>
</ul>
스크립트
function checkOnlyOne1(element) {
const checkboxes1 = document.getElementsByName("nameval");
checkboxes1.forEach((cb) => {
cb.checked = false;
});
element.checked = true;
};