본문 바로가기
프론트엔드/Javascript

[jquery] checkbox 체크여부 확인하기

by 작은소행성 2021. 8. 25.

 

 

checkbox checked 여부

- id로 체크하는 경우

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

 

- name으로 체크하는 경우

$('input:checkbox[name="checkbox_name"]').is(":checked") == true

 

- $('input[id="checkbox_id"]') + 옵션 형태로 작성 가능

 $('input[name="checkbox_name"]').is(":checked") 

 

- true, false 로 확인

//체크된 상태

$('input[name="checkbox_name"]').is(":checked") == true

//체크 안 된 상태

$('input[name="checkbox_name"]').is(":checked") == false

 

-조건문으로 활용

 

if($('input[name="checkbox_name"]').is(":checked") == true){
    console.log('체크된 상태');
}
 
if($('input[name="checkbox_name"]').is(":checked") == false){
    console.log('체크 안 된 상태');
}

 

 

 

 

 

checkbox 갯수 확인 

- 전체 갯수 

$('input:checkbox[id="checkbox_name"]').length 

 

- 선택된 갯수

$('input:checkbox[id="checkbox_name"]:checked').length 

 

- 배열을 사용할 경우

$('input:checkbox[id ='checkbox_name[]"]:checked').length

$("input[id ='checkbox_name[]']:checked").length

 

 

checkbox checked 처리 

- 개별

$('input:checkbox[id="checkbox_id"]').attr("checked", true);

 

- 전체(동일한 id나 name으로 여래개인 경우 전체를 컨트롤 가능)

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

this.checked = true;

});

 

 

checkbox value 값 가져오기 :

$('input:checkbox[id="checkbox_id"]').val();

 

 

반응형