जांचें कि क्या सभी चेकबॉक्स चयनित हैं


139

यदि सभी चेकबॉक्स class="abc"चयनित हैं, तो मैं कैसे जांच करूं ?

मुझे हर बार उनमें से किसी एक को चेक करने या अनियंत्रित करने की आवश्यकता है। क्या मैं इसे क्लिक या चेंज पर करूं?

जवाबों:


257

मुझे लगता है कि इस स्थिति के लिए सबसे आसान तरीका जाँच है:

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

हर बार नया चेकबॉक्स चेक करने पर आप ऐसा कर सकते हैं:

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

2
lengthयह एक मजेदार बात नहीं है जो मुझे लगता है कि आपका मतलब है ..size()
जिष्णु एपी

3
धन्यवाद @ TheSuperTramp! मेरा मतलब था length, लेकिन मैं कभी नहीं भूल सकता कि यह एक संपत्ति है और एक विधि नहीं है। सही किया
cbrandolino

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

2
सही, साफ और सुरुचिपूर्ण समाधान। "अगर ($ ('input.abc') नहीं। (": चेक किया हुआ ")। लंबाई) {...}" भी काम करता है।
स्कोरुनका फ्रांटिसेक

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 पर कोड उदाहरण ।


वास्तव में निश्चित क्यों नहीं, लेकिन मेरी a.length मुझे 8 का मान देती है जबकि मेरे पास केवल 4 चेकबॉक्स हैं।
संता

filterचेक बॉक्स, धन्यवाद ज्यादा के एक समूह के लिए एक अच्छा उपाय है।
११:१४


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

वैकल्पिक रूप से, आप भी हर इस्तेमाल किया जा सकता है ():

// 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();
}
हमारी साइट का प्रयोग करके, आप स्वीकार करते हैं कि आपने हमारी Cookie Policy और निजता नीति को पढ़ और समझा लिया है।
Licensed under cc by-sa 3.0 with attribution required.