[Javascript] Checkbox 하나만 선택되게 하기

- 일반적으로 Table에서 하나만 선택되도록 구현하려면 Radio 버튼을 주로 사용한다. 하지만, 기획 또는 UI 등의 이유로 불가피하게 Checkbox를 사용하여 하나만 선택되는 기능을 구현하는 경우에 대해 그 방법을 기술한다.

 

1. forEach 문법 사용

function checkBoxSelect(element) {

	const checkboxes = document.getElementsByName("test");

	checkboxes.forEach((cb) => {
		cb.checked = false;
	})

	element.checked = true;

}

<table>
	<tr>
		<td><input type="checkbox" name="test" onClick="checkBoxSelect(this)"></td>
	</tr>
	<tr>
		<td><input type="checkbox" name="test" onClick="checkBoxSelect(this)"></td>
	</tr>
	<tr>
		<td><input type="checkbox" name="test" onClick="checkBoxSelect(this)"></td>
	</tr>
</table>

1) 크롬 / Edge : 정상 동작 > Checkbox 하나만 선택됨

2) IE 11 : 비정상 동작 > Checkbox 중복 선택됨

- forEach 문법은 IE 11에서 정상적으로 동작하지 않는다는 글이 대다수였고, 방법이 있다면 개인적으로 찾아보길 권장한다.

: 크로스 브라우징을 고려한다면, 아래 방법을 추천한다.

 

2. for 문법 사용

function checkBoxSelect(element) {

	var obj = document.getElementsByName("test");
	for (var i = 0; i < obj.length; i++) {
		if (obj[i] != element) {
			obj[i].checked = false;
		}
	}

}

<table>
	<tr>
		<td><input type="checkbox" name="test" onClick="checkBoxSelect(this)"></td>
	</tr>
	<tr>
		<td><input type="checkbox" name="test" onClick="checkBoxSelect(this)"></td>
	</tr>
	<tr>
		<td><input type="checkbox" name="test" onClick="checkBoxSelect(this)"></td>
	</tr>
</table>

1) 크롬 / Edge : 정상 동작 > Checkbox 하나만 선택됨

2) IE 11 : 정상 동작 > Checkbox 하나만 선택됨

 

* 참고사항 : 기타 브라우저(Safari, FireFox 등)에 대한 테스트는 별도로 하지 않음