checkbox 체크 여부 알기, 체크 및 해제 하기

기타 언어/JavaScript

by 개발익선 2021. 7. 21. 16:36

2개이상의 radio 버튼을 진행할 때는 value에 따라 자동으로 체크, 해제가 되는데,

checkbox로 진행 할 때는 직접 event로 확인해서 컨트롤 해주어야 한다.

그래서 이 checkbox 때문에 애를 먹다 결국 해결 했다.

우선 체크박스를 html에서 만들었다.

1
2
3
4

<div class="checkbox_agree">
    <input id="agree" name="agree" type="checkbox" value=""/><p>동의</p>
    <input id="disagree" name="agree" type="checkbox" value=""/><p>미동의</p>
</div>

css를 적용한 상태라 다를 수 있으니 참고!

그리고 자바스크립트에서 event를 받아주면 쉽게 끝낼 수 있다.

나는 click 했을 경우 EventHandler를 'e'로 받았다.

1
2
3
4
5
6
7
8
9
10

$('input:checkbox[type=checkbox]').click(function (e) {
            var checked = e.target;
            if(checked.id=="agree"){
                console.log("동의 쪽 맞나요?");
                $("input:checkbox[id='disagree']").prop("checked", false);
            }else if(checked.id=="disagree"){
                console.log("미동의 쪽 맞나요?");
                $("input:checkbox[id='agree']").prop("checked", false);
            }
        });