모든 확인란이 선택되어 있는지 확인


139

확인란이 모두 선택되어 있는지 어떻게 확인 class="abc"합니까?

그들 중 하나가 체크되거나 체크되지 않을 때마다 확인해야합니다. 클릭하거나 변경해도됩니까?

답변:


257

가장 쉬운 방법은이 상태를 확인하는 것입니다.

$('.abc:checked').length == $('.abc').length

새 확인란을 선택할 때마다 수행 할 수 있습니다.

$(".abc").change(function(){
    if ($('.abc:checked').length == $('.abc').length) {
       //do something
    }
});

2
length내가 생각하는 funcion되지 않습니다 ..size()
Jishnu AP

3
감사합니다 @TheSuperTramp! 나는을 의미 length했지만, 그것이 속성이 아니라 방법이라는 것을 잊지는 않습니다. 수정
cbrandolino

97
$('input.abc').not(':checked').length > 0

2
완벽하고 깨끗하며 우아한 솔루션. "if ($ ( 'input.abc'). not (": checked "). length) {...}"도 작동합니다.
Skorunka František

1
그 대답은 정확하지 않습니다. 확인란이 선택되어 있는지 확인합니다. 그러나 질문은 모든 확인란이 선택되어 있는지 확인 입니다. 올바른 코드는 다음과 같습니다 $('input.abc').not(':checked').length === 0.
hlcs

1
성능을 고려하면이 답변이 허용되는 답변보다 낫습니다. 이것은 두 번이 아니라 한 번만 반복됩니다.
Maarten Kieft

15

당신이 사용할 수있는 change()

$("input[type='checkbox'].abc").change(function(){
    var a = $("input[type='checkbox'].abc");
    if(a.length == a.filter(":checked").length){
        alert('all checked');
    }
});

이 작업은 총 .abc확인란 수가 총 개수 와 일치 하는지 확인하는 것 입니다 .abc:checked.

jsfiddle의 코드 예제 .


왜 그런지 잘 모르겠지만 4 개의 확인란 만있는 동안 a.length는 8의 값을 제공합니다.
산타

이것은 filter확인란 그룹에 좋은 솔루션입니다. 감사합니다.
Overallduka


3

질문 1 부 :

var allChecked = true;
$("input.abc").each(function(index, element){
  if(!element.checked){
    allChecked = false;
    return false;
  } 
});

편집하다:

위의 답변 (http://stackoverflow.com/questions/5541387/check-if-all-checkboxes-are-selected/5541480#5541480)이 더 좋습니다.


1

검색 기준은 다음 중 하나입니다.

input[type=checkbox].MyClass:not(:checked)
input[type=checkbox].MyClass:checked

변경 이벤트에 연결하고 싶을 것입니다.


1

또는 every ()를 사용할 수도 있습니다.

// Cache DOM Lookup
var abc = $(".abc");

// On Click
abc.on("click",function(){

    // Check if all items in list are selected
    if(abc.toArray().every(areSelected)){
        //do something
    }

    function areSelected(element, index, array){
        return array[index].checked;
    }
});

1

클래스 독립적 인 솔루션

var checkBox = 'input[type="checkbox"]';
if ($(checkBox+':checked').length == $(checkBox).length) {
   //Do Something
}

1

이것이 내 코드에서 달성 한 방법입니다.

if($('.citiescheckbox:checked').length == $('.citiescheckbox').length){
    $('.citycontainer').hide();
}else{
    $('.citycontainer').show();
}
당사 사이트를 사용함과 동시에 당사의 쿠키 정책개인정보 보호정책을 읽고 이해하였음을 인정하는 것으로 간주합니다.
Licensed under cc by-sa 3.0 with attribution required.