[JQUERY] 체크박스 (checkbox) 여러가지 기능들

jquery 체크박스 여러가지 기능들 모음

체크값에 값을 기준으로 | 구분값으로 split 함수를 이용해서 for문을 활용한 예제 입니다.

var salesArea = '${PARTNER\_SALES\_LIST.C\_SVC\_AREA}';
var arrSalesArea = salesArea.split('|');

//값이  있을  경우  체크  항목  체크
$(":checkbox\[name=chkCodes\]").each(function(){
    for(var i=0; i<arrSalesArea.length; i++){
        if( $(this).val() == arrSalesArea\[i\] ){
            $(this).attr("checked", "checked");
            break;
         }
     }
});

전체 선택할 경우 나머지 체크는 해제 합니다.

$(":checkbox\[name=chkCodes\]").change(function(){
    //선택 값이 전국(3000)일경우는 나머지체크들 다 체크해제함
    if( $(this).val() == "3000" && $(this).is(":checked") ){
        $(":checkbox\[name=chkCodes\]").not(this).removeAttr("checked");
    } else {
        $(":checkbox\[name=chkCodes\]\[value=3000\]").removeAttr("checked");
    }

    // 체크 갯수가 넘어갈 경우 경고 및 갯수 이상 this값 제거
    if( $(":checkbox\[name=chkCodes\]:checked").size() > 5 ){
        alert("최대 5개까지만 선택가능합니다.");
        $(this).removeAttr("checked");
     }
});

체크된 항목을 가져와서 for문을 동작합니다.

$('input:checkbox\[name=checkbox00001\]:checked').each(function() {
    ....
});

체크박스 길이를 구합니다.

$("input:checkbox\[name=checkbox00001\]:checked").length

checked 여부를 확인 합니다.

$("input:checkbox[id='ID']").is(":checked") == true : false  // ID
$("input:checkbox[name='NAME']").is(":checked") == true : false // NAME

checked/unchecked 처리 합니다.

$("input:checkbox[id='ID']").prop("checked", true); /* by ID */
$("input:checkbox[name='NAME']").prop("checked", false); /* by NAME */

특정 라디오버튼 선택 / 모든 라디오버튼 선택해제

$("input:radio[name='NAME']:radio[value='VALUE']").attr("checked",true);
$("input:radio[name='NAME']").removeAttr("checked");

전체선택 체크박스를 선택하면 그 아래의 모든 체크박스를 선택

<label><input type="checkbox" id="check_all" class="input_check"> <b>전체선택</b></label>
<ul class="select_subject">
    <label><input type="checkbox" class="input_check" name="class[1]" value="1"> <b>1</b></label>
    <label><input type="checkbox" class="input_check" name="class[2]" value="2"> <b>2</b></label>
</ul>

<script>
$(function(){
    $("#check_all").click(function(){
        var chk = $(this).is(":checked");//.attr('checked');
        if(chk) $(".select_subject input").prop('checked', true);
        else  $(".select_subject input").prop('checked', false);
    });
});
</script>