jQuery – checkbox 정리

출처 : [농사짓는 개발자] 님의 https://openlife.tistory.com/381

• checkbox checked 여부 :
  • id인 경우
    • $(‘input:checkbox[id=”checkbox_id“]’).is(“:checked“) == true
  • name인 경우
    • $(‘input:checkbox[name=”checkbox_name“]’).is(“:checked“) ==  true

• name 인 경우에만 가능
  • checkbox 전체 갯수 – $(‘input:checkbox[name=”checkbox_name“]’).length
  • checkbox 선택된 갯수 – $(‘input:checkbox[name=”checkbox_name“]:checked‘).length

• checkbox 전체 순회 하며 처리(동일한 name으로 여래개인 경우 전체를 컨트롤 할 수 있다.)

$('input:checkbox [name="checkbox_name"]').each(function() {

     this.checked = true; //checked 처리

     if(this.checked){//checked 처리된 항목의 값
            alert(this.value); 
     }

});

• checkbox 전체 순회 하며 값을 값을 비교하여 checked 처리

$('input:checkbox [name="checkbox_name"]').each(function() {

    if(this.value == "비교값"){ //값 비교
           this.checked = true; //checked 처리
    }

});

주의 : 동일한 name 으로 1개 or여러개 있을 경우에는 같은 name 으로 된 모든 checkbox 가 checked 처리된다.

• checkbox value 값 가져오기 :  $(‘input:checkbox[id=”checkbox_id“]’).val(); //단일건
• checkbox checked 처리 하기 : $(‘input:checkbox[id=”checkbox_id“]’).attr(“checked“, true); //단일건
• checkbox checked 여부 간단 확인: $(“#checkbox_id“]’).is(“:checked“); //단일건

=== Reference ===

만약 해당 id, name이 존재하지 않더라도 javascript 에러가 발생하지 않는다.