과거에는 하드 코딩을 좋아해서 명령어도 다 외웠는데 이제는 필요할 때마다 검색해서 사용하다 보니 간단한 함수나 명령어도 기억이 나질 않네요. 자주 사용하는 체크 박스에서 체크 여부와 전체 체크를 할 수 있는 jQuery 소스를 안내하고자 합니다.

오리지널 JavaScript 방식으로 개발 하는 경우 소스가 길었지만 jQuery로 할 때에는 아래와 같이 간단하게 구성이 가능합니다.

/* html */
<input type="checkbox" id="chk" value="1">

/* javascript 방식 */
var o = document.getElementById('chk');
var ischecked = o.checked;

/* jQuery 방식 */
var o = $("#chk").is(':checked');

<input type="checkbox" name="chk" id="chk" value="1">

1. CheckBox 체크하기

아래 첫 번째 라인은 chk 라는 이름과 ID chk 라는 명칭이 checkbox 이며 선택하면 값은 1이 지정되는 태그 입니다.두 번째 라인은 체크 박스 ID 값을 찾고 true 값을 넣어주어 선택된 상태가 되게 해 줍니다. 세 번째 라인은 name 값인 chk 값을 찾아서 checked 여부를 true 설정하는 명령어 입니다. 값을 저장할 때에는 name 값이 필요하지만 단순히 체크 여부를 사용할 때에는 ID를 사용하는 게 간편합니다.

<input type="checkbox" name="chk" id="chk" value="1">
$('#chk').prop('checked',true);
$('input:checkbox[name="name"]').prop('checked',true);

2. Checkbox 체크 여부 확인하기

is 라는 구분을 이용하여 checked 여부를 확인할 수 있습니다. 아래 예시처럼 조건 문에서 $('#chk').is(':checked')==true 를 이용하면 체크가 되어 있는지 여부를 확인하여 해당 범위를 실행하게 할 수 있습니다.

$('#chk').is(':checked');

if( $('#chk').is(':checked')==true ){
    alert("선택");
}
else{
    alert("해제");
}

3. Checkbox 전체 선택하기

아래 소스에서  클릭하면 나머지 체크 박스가 모두 선택되어 지는 소스 입니다. 소스를 분석하면 input 태그에서 checkbox 타입을 모두 checked 를 true 설정으로 한다는 의미 입니다. 해당 소스는 예제를 위한 소스이므로 checkbox 가 다양하게 존재하는 태그에는 사용하기 어렵습니다. 체크 박스 선택 하였을 때 토글(Toggle) 값을 넣어 전체 선택 or 전체 취소와 같이 구성할 수 있고 each 루틴과 동일한 class 아이디를 이용하면 간단하게 개선하여 활용 할 수 있습니다.

<div>필요함 비품 선택 : <input type="checkbox" id="allchk">전체선택</div>
<div><input id="chk1" type="checkbox" value="볼펜">볼펜</div>
<div><input id="chk2" type="checkbox" value="연필">연필</div>
<div><input id="chk3" type="checkbox" value="지우게">지우게</div>

$('#allchk').click(function(){
    if( $('#allchk').is(':checked') ){
        $('input:checkbox').prop('checked',true);
    }
});

4. checkbox 전체 선택 전체 해제 실무에서 활용

제가 실제 사용하는 소스로 간단하면서도 활용하기 좋은 방식 입니다. 전체 선택 체크 여부에 따라 class 가 "chk"인 값을 루틴을 돌면서 전체 선택 체크 값과 동일하게 지정하는 소스 입니다. 해당 방식은 게시판에서 전체 선택을 하여 삭제하거나 이동할 때 많이 사용 됩니다.

<div>간식선택 : <input type="checkbox" id="allchk">전체선택</div>
<div><input id="chk1" class="chk" type="checkbox" value="새우깡">새우깡</div>
<div><input id="chk2" class="chk" type="checkbox" value="초코파이">초코파이</div>
<div><input id="chk3" class="chk" type="checkbox" value="빅파이">빅파이</div>

    $('#allchk').click(function(){
        var toggle = ( $(this).is(':checked')==true ) ? true : false;

        $('.chk').each(function(){
            $(this).prop('checked', toggle );
        });
    });

jQuery 이용하여 체크 박스 선택 여부와 함께 전체 체크를 할 수 있는 방법과 소스에 대해서 설명하였습니다. 자주 사용하는 기능으로 숙지하고 있으면 지속 적으로 사용이 가능한 방법이므로 이해를 하는 게 좋습니다.

실제 테스트 한 소스로 그대로 사용하셔도 됩니다. 해당 페이지에서 태그가 실행 될 수 있어서 script 선언문과 document ready 부분은 제외 되어 있습니다.