체크박스 선택 시 전체 선택 또는 단일 선택 시 전체 선택

이용약관 등 체크박스가 여러개 있을 경우

checked 유무에 따라서

전체 선택, 전체 해제가 필요 한 경우가 있다.

 

그럴 경우에는 input name을 동일하게 맞춰주면 유용하게 사용할 수 있다.

 

$("#checkAll").click(function() {
    if ($("#checkAll").prop("checked")) {
        $("input[name=check]").prop("checked", true);
    } else {
        $("input[name=check]").prop("checked", false);
    }
});

 

 

또는 단일 선택으로 모든 체크박스를 선택했을때

전체선택이 되도록 하는 방법도 있다.

 

$("input[name=check]").click(function() {
    if ($("input[name=check]:checked").length === $("input[name=check]").length) {
        $("#checkAll").prop("checked", true);
    } else {
        $("#checkAll").prop("checked", false);
    }
});

 

나 같은 경우에는 input name을 check라고 통일 시켜주고 진행했다.