jquery checkbox 실렉터 selector 사용 정리

체크박스는 이래저래 쓸 일이 꼭 생기는 것 같습니다.

이번에 사용한 경우하게 된 이유는

체크된 checkbox 외에는 데이터를 안 넘기도록 하는 작업을 위해서

체크된 것과 안된 것을 일괄적으로 선택하고 처리하는 것이 었습니다.

체크가 되어 있는 것과 안되어 있는 것을 선택하려면 어떻게 해야할까요?

이전에 eq연산자를 사용한 적이 있는데 형태가 비슷합니다.

바로 :checked선택자입니다.

사용 방법은 아래와 같습니다.

$("input:checked")

주의할 점은 이렇게 하면 모든 input을 조사하기 때문에 범위를 좁혀야겠습니다.

그렇다면 체크박스만 하려면 아래같이 바꿔야겠네요.

$("input[type='checkbox']:checked")

이렇게하면 checkbox의 checked된 요소들만 선택이 됩니다. 

예제 소스를 작성해서 더 설명해보겠습니다.

체크박스가 총 네개, 버튼 포함 input이 총 12개인 상태입니다.

이 중에 체크된 것이 몇 개인지와

체크안 된 것이 몇개 인지 확인하는 화면입니다.

ㄱ
ㄴ
ㄷ
ㄹ
ㄱ
ㄴ
ㄷ
ㄹ
결과출력

<input type='checkbox' name='checkBox'/> ㄱ<br>

<input type='checkbox' name='checkBox'/> ㄴ<br>

<input type='checkbox' name='checkBox'/> ㄷ<br>

<input type='checkbox' name='checkBox'/> ㄹ<br>

<input type="radio" name="radioBtn" value="ㄱ">ㄱ<br> 
<input type="radio" name="radioBtn" value="ㄴ">ㄴ<br>

<input type="radio" name="radioBtn" value="ㄷ">ㄷ<br>

<input type="radio" name="radioBtn" value="ㄹ">ㄹ<br>

결과출력

<span style='display:block;border:1px solid #000' id='result_box'></span>

<input type='button' id='checked_out' value='체크된 숫자'>

<input type='button' id='not_checked_out' value='체크안된 숫자'>

<input type='button' id='checkbox_out' value='체크박스 체크된 숫자'>

<input type='button' id='not_checkbox_out' value='체크박스 체크 안된 숫자'>

<script>

$("#checked_out").click(function(){

     $("#result_box")

          .text($("input:checked").length);

});

$("#not_checked_out").click(function(){

     $("#result_box")

          .text($("input").not("input:checked").length);

});

$("#checkbox_out").click(function(){

     $("#result_box")

          .text($("input[type='checkbox']:checked").length);

});

$("#not_checkbox_out").click(function(){

     $("#result_box")

          .text($("input").not("input[type='checkbox']:checked").length);

});

</script>

결과는 직접 해보시면 알게 되실 겁니다.

어떤 차이가 있는지 말이죠.

우선 선택자는 이렇게 처리했으나, 

여기서 저는 한가지가 더 필요합니다. 

데이터를 넘길 때 체크가 안된 것들의 데이터는 안넘기고 싶네요.

이럴 때는 가장 좋은 방법이 넘기지 않을 대상은 disabled를 걸어서 아에 안넘어 가게 하는 것 입니다. 

그렇다면 이렇게 하면 되겠군요.

$("input[type='checkbox']").not(i"nput[type='checkbox']:checked").attr("disabled","disabled");

이것도 버튼으로 추가하겠습니다.

      <input type= 'button' id = 'proc_disabled' value ='체크안된 element disabled' >

              $( "#proc_disabled").click(function (){

                     $( "#test input").not("#test input[type='checkbox']:checked").attr( "disabled","disabled" );

                   $( "#result_box")

                        .text( "처리완료" );

              });

위에 사진을 보시면 아시겠지만, disabled된 input들이 disabled로 바뀌었습니다.

이렇게 하면 전체를 긁어서 검사를 하는 동작을 줄일 수 있어서 더 편리하네요.

조금이도 도움이 되셨길 바랍니다