input checkbox 하나만 선택하도록 하기

input의 type=checkbox인 체크박스를 다중선택이 아니라 단일선택만 가능하도록 하기

 

1. jsp에서 checkbox로 이용할 input태그에 onclick이벤트를 걸어줌

*onclick 이벤트의 이름을 clickOnlyOne이라고 지었고, (this)라는건 이 태그를 매개변수로 이용한다는 것

<c:if test="${student.size() !=0 }">
    <c:forEach items="${student}" var="student">
        <input name="student_id" type="hidden" value="${student.student_id}">
        <label class="me-3 studentCheckLabel">
            <input class="form-check-input" name="student_name" onclick="clickOnlyOne(this)" type="checkbox" > 
        ${student.student_name}</label>
    </c:forEach>
</c:if>

 

2. jsp의 스크립트 태그에서 자바스크립트코드를 사용해서 function만들어줌.

3. function이름을 input태그에서 onclick에 넣었던 것과 일치시키고 ( )괄호안에는 아무거나 적어도 됨.

4. 체크박스의 값을 true,false로 조절할 수 있도록 student_name이라는 이름을가진 객체를 checkboxes라고 이름지어만듦.

5. forEach를 이용해서 모든 체크박스에 checked상태인  것들을 모두 false 상태(=체크해제)시킴

6. 그리고나서 매개변수였던 itself (즉, this 또는 눌렸던 해당체크박스)만 checked상태 true로 만든다.

* 매개변수로 칭해졌던 itself는 위에 바디태그에서 input태그의 onclick() 의 괄호안에있던 this <-선택된 애를 말함 

<script type="text/javascript">
	function clickOnlyOne(itself){
		const checkboxes = document.getElementsByName("student_name");
		checkboxes.forEach((checkbox) =>{
			checkbox.checked =false;
		})
		itself.checked = true;
	}
</script>

 

7. 화면에서 체크박스들을 선택해보면 1개만 선택됨.

(function기능 적어놓고 자동으로 호출되서 사용 가능해짐 => input태그에 onclick으로 이미 이벤트가 걸린애를 매개로 자동 실행되기때문에 function을 어디서 따로 안불러줘도 됨. // 클릭=호출)

 

 

참고한블로그

https://hianna.tistory.com/434