Programming > jQuery & JavaScript

체크박스

체크박스 체크옵션

check 박스 전체를 체크하기
jQuery 체크박스 전체를 일괄 check/uncheck 를 위한 함수 만들기

$(document).ready(function(){
    // jQuery 함수를 확장한 함수를 만든다.
    $.fn.extend({
        check: function() {
            return this.each(function() {
                this.checked = true;
            });
        },
        uncheck: function() {
            return this.each(function() {
                this.checked = false;
            });
        }
    });

    $("#ckon").click(function(){
        // 특정 버튼을 클릭시 해당선택자의 확장함수를 콜한다.
        $( "input[type='checkbox']" ).check();
    });
    $("#ckoff").click(function(){
        $( "input[type='checkbox']" ).uncheck();
    });
});

javascript

※ 클래스명으로 제어하기
let obj = document.getElementsByClassName('cs_ckbox');

for (let i = 0; i < obj.length; i++) {
    obj[i].checked = false;  //or true
}

※ 체크박스 name으로 제어하기 (form 안의 name="myCheck" 일경우)
<form name="myForm">
   <input type='checkbox' name='myCheck' value='xx' />
    ....
</form>
for(let i=0; i < myForm.myCheck.length; i++) {
    myForm.myCheck[i].checked = true;
}

체크박스의 체크상태 확인하기

let isChecked = document.getElementById('myckbox').checked;  :: 결과 (true or false)

$("input:checkbox[id='myckbox']").is(":checked")

체크박스를 제어하기 (true or false 설정)
javascript

document.getElementById('myckbox').checked = true;   :: 체크 설정
document.getElementById('myckbox').checked = false;  :: 체크 해제

jQuery

$('#myckbox').prop('checked', true);  // 우선
$('#myckbox').attr('checked', true); // jQuery 1.5 이하버전용으로 사용금지