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

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

사용 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")의 차이점을 알아보겠습니다.

👀이전 포스팅

//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); });

결과

좀 더 간략하게 작성할 수 있는 방법 중 삼항연산자를 이용하는 방법이 있는데,

이건 다음 포스팅에서 알아보겠다!