[JQuery] Checkbox 전체 선택하기

checkbox를 하나씩 클릭하기도 하지만 '모두동의' 와 같은 체크박스 하나만 선택해도 모든 체크박스가 선택되어야 하는 경우도 있습니다.

 

그럴때 사용하면 좋은 코드를 가져왔습니다.

 

먼저 예시로 사용할 HTML 코드부터 살펴봅시다.

<form action="" id="frm">
    <p>
    	전체 선택:
        <input type="checkbox" name="dummy" id="checkAll">
    </p>
    <ul>
        <li>
            <label for="check1">체크박스 1번</label>
            <input type="checkbox" name="test" id="check1"></li>
        </li>
        <li>
            <label for="check2">체크박스 2번</label>
            <input type="checkbox" name="test" id="check2"></li>
        </li>
        <li>
            <label for="check3">체크박스 3번</label>
            <input type="checkbox" name="test" id="check3"></li>
        </li>
        <li>
            <label for="check4">체크박스 4번</label>
            <input type="checkbox" name="test" id="check4"></li>
        </li>
    </ul>
</form>

이러한 HTML코드가 있다고 생각해봅시다!

그럼 위와같은 그림이 나올텐데요! 그 다음은 스크립트를 작성해야겠죠?

var $checkAll = $('#checkAll');
$checkAll.change(function () {
    var $this = $(this);
    var checked = $this.prop('checked'); // checked 문자열 참조(true, false)
    // console.log(checked);
    $('input[name="test"]').prop('checked', checked);

});
var boxes = $('input[name="test"]');
boxes.change(function () {
    // 첫 번째 방법
    /*
    var selectAll = true;
    var count = boxes.length;
    var i = 0;
    for (; i < count; i++) {
        if (!boxes[i].checked) {
            selectAll = false;
            break;
        }
    }
    */
    // 두 번째 방법
    var boxLength = boxes.length;
    // 체크된 체크박스 갯수를 확인하기 위해 :checked 필터를 사용하여 체크박스만 선택한 후 length 프로퍼티를 확인
    var checkedLength = $('input[name="test"]:checked').length;
    var selectAll = (boxLength == checkedLength);

	$checkAll.prop('checked', selectAll);
});

이상 checkbox를 모두 선택하는 방법에 대하여 알아보았습니다.