사슴 코딩 로그

JQuery checkbox 제어도 간단하지만..

항상 모든 api를 다 외우고 코딩할 수는 없는법..

쓰려다보면 헷갈릴때가 있어 정리해 놓는다.

//1. checkbox check 여부
$('input:checkbox[id="checkbox_id"]').is(":checked");
$('input:checkbox[name="checkbox_name"]').is(":checked");
$('input[id="checkbox_name"]').is(":checked");
$("#checkbox_id"]').is(":checked");

//2. checkbox의 전체 갯수
$('input:checkbox[name="checkbox_name"]').length;

//3. checkbox의 선택된 갯수
$('input:checkbox[name="checkbox_name"]:checked').length;

//4. checkbox value 값 가져오기
$('input:checkbox[id="checkbox_id"]').val();

//5. checkbox checked 처리 하기
$('input:checkbox[id="checkbox_id"]').attr("checked", true);
$('input:checkbox[id="checkbox_id"]').prop("checked", true); //false는 해제

//6. checkbox 동일한 이름 반복문 접근
 $('input:checkbox[name="checkbox_name"]').each(function() {
      this.checked = true; //checked 처리
      if (this.checked) { //checked 처리된 항목의 값
            alert(this.value);  // OR $(this).val()
      }
 });

//7. checkbox 전체 순회 하며 값을 값을 확인
 $('input:checkbox[name="checkbox_name"]').each(function() {
     if (this.value == "비교값") { //값 비교
            this.checked = true; //checked 처리
      }
 });

//8. 전체선택 체크박스 선택시 그 아래 모든 체크박스 선택
$("#check_all").click(function(){
    var isCheck = $(this).is(":checked");//.attr('checked');
    if (isCheck) {
        $('input:checkbox[name="checkbox_name"]').prop('checked', true);
    } else {
        $('input:checkbox[name="checkbox_name"]').prop('checked', false);
    }
});