코딩 공부/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;
	};