Jquery 어떤 체크 박스가 체크되었는지

Question

작업하면서 기억안날 때 마다 일일히 찾아 보기 귀찮아 작성합니다.

사용 Method

.is() - 선택 요소를 확인 후 Boolean(true, false) 반환

.attr(), .prop() - 태그의 속성 변경은 같지만 .attr()은 해당 태그의 속성값을 반환하고 .prop()은 true, false를 반환

.click() - 선택 요소를 클릭 할 경우 반응

.change() - 선택 요소의 값이 변하였을 때 반응

.each() - 복수의 요소 수 만큼 반복 함수 실행

1. 전체체크

//전체체크 클릭 시
$("#chkAll").click(function(){

    if($(this).is(":checked")){ //대상이 체크 되어 있을 때
    
    	//모든 체크박스 체크
        $(".chkSub").attr("checked", true);
        
    }else{ //대상이 체크 해제 되어 있을 때
    
    	//모든 체크박스 체크해제
        $(".chkSub").attr("checked", false);
        
    }
    
});
        
//전체 체크의 값이 변화했을 때
$("#chkAll").change(function(){

    if($(this).is(":checked")){ //대상이 체크 되어 있을 때
    
        //같은 네임을 가진 체크박스 체크
        $("input:checkbox[name='chk']").prop("checked", true);
        
    }else{ //대상이 체크 해제 되어 있을 때
    
        //같은 네임을 가진 체크박스 체크해제
        $("input:checkbox[name='chk']").prop("checked", false);
        
    }
    
});

2. 체크된 체크 박스 값 확인

//chkAll이란 ID를 가지고 있는 체크박스의 값 출력
console.log($("input:checkbox[id='chkAll']).val());

3. 전체 체크된 체크 박스 각각의 값 확인

//클래스명 chkSub를 가진 체크된 체크 박스 값 출력
$(".chkSub:checked").each(function(idx){

    console.log(idx + "번째 = " + $(this).val());
    
});

4. 체크박스 체크 여부 확인

//is - true, false 반환
if($("#chkBox").is(":checked")){

    console.log("is 체크 됨");
    
}else{

    console.log("is 체크 안됨");
    
}

//prop - true, false 반환
if($("input:checkbox[name='chkBox']").prop("checked")){

    console.log("prop 체크 됨");
    
}else{

    console.log("prop 체크 안됨");
    
}

//attr - 'checked' 반환 문자열 비교 (추천하지 않음)
if($("input:checkbox[id='chkBox']").attr("checked") == "checked"){

    console.log("attr 체크 됨");
    
}else{

    console.log("attr 체크 안됨");
    
}

5. 체크된 체크박스의 갯수, 전체 체크박스의 갯수 확인

//chkSub라는 클래스를 가진 체크박스의 갯수
console.log($(".chkSub").length);

//체크된 체크박스의 갯수
console.log($(".chkSub:checked").length);

💡

오늘은 체크박스에서 체크여부를 확인하거나 컨트롤할 때 유용하게 쓰이는

prop("checked")와 is(":checked")의 차이점을 알아보겠습니다.

👀이전 포스팅

https://yeonzzy.tistory.com/21

[jQuery] attr()과 prop()의 차이점은 무엇일까?

💡 오늘은 attr()과 prop()의 차이점을 알아보겠습니다. attr() VS prop() jQuery 1.6.0 업데이트로 attr() 과 prop() 두 개로 나눠졌다. - attr() : HTML 속성 (Attribute) 취급 - prop() : javascrip..

yeonzzy.tistory.com

prop("checked") VS is(":checked")

jQuery 1.6.0 이상을 사용하는 경우 prop("checked") 가 가장 직접적인 jQuery 방식이며 단순히 속성을 직접 확인하는 것이 아니라 몇 가지 수준의 간접적인 작업을 먼저 수행한다.

- Webkit의 브라우저에서는 요소가 선택자와 일차하는지 테스트하는 기능을 제공하고 기본적으로 :checked를 지원하므로 webkit 브라우저에서는 상당히 직접적.

- Firefox와 IE에서는 간단한 선택기가 sizzle용기를 통해 작동하여 엄청난 수의 함수 호출이 발생.

그렇다면 두 방식의 어떤 타입을 반환할까?

<!-- .html -->
<input type="checkbox" id="example" checked">example

위의 html에서 checked속성을 주었기때문에 checkbox는 true 값을 반환한다.

// .js
var chk = $("input[type=checkbox]");
        
console.log(chk.prop("checked"));   //true
console.log(chk.is(":checked"));    //true

jQuery.type()로 반환되는 값의 타입(type)을 확인하면 두 개의 방식 모두 boolean 타입을 갖는다.

// 타입(type) 확인
console.log(jQuery.type(chk.prop("checked")));  //boolean
console.log(jQuery.type(chk.is(":checked")));  //boolean

체크박스는 단일로 처리되는 경우도 있지만, 전체 체크박스가 하위의 체크박스를 함께 처리할 경우를 많이 볼 수 있다.

그렇다면 전체 체크박스 처리는 어떻게 할까?

// 체크박스 .html
<input type="checkbox" id="chkCtrl"> 전체 선택 <br>
<input type="checkbox" name="chk">선택 1
<input type="checkbox" name="chk">선택 2
<input type="checkbox" name="chk">선택 3

이렇게 html을 작성하고 prop("checked") 와 is(":checked") 를 사용하여 전체선택박스를 컨트롤 해보았다.

// .js
var chkList = $("input[name=chk]");

$("#chkCtrl").click(function(){
	if($(this).is(":checked")){
		chkList.prop("checked", true);
	}else
		chkList.prop("checked", false);
});