So aktivieren und deaktivieren Sie mehrere Kontrollkästchen mit einem Klick in Javascript

Question

In meinem Projekt habe ich mehrere Kontrollkästchen (insgesamt 27) .Ich versuche, alle Kontrollkästchen mit einem einzigen Klick klicken und ich kann do it. Aber ich möchte das gleiche Kontrollkästchen mit der gleichen Schaltfläche deaktivieren click.So die Schaltfläche sollte wie ein Selektor und ein de-selector.Ich kann kein Kontrollkästchen anstelle der Schaltfläche verwenden. Mein HTML-Code ist:

<div class="countryAll"> 
    <span class="countrySelect_lngTrans_Translatable" title="Select All"> 
       <input type="button" class="selectAllcountry" /> 
      </span> 
    <span class="displayData">Select whole country</span> 
</div> 

In js:

$(self.element).on('click', '.selectAllcountry', function(e) { 
    debugger; 
    $('.chkCountry').trigger('click') 
    e.stopPropagation(); 
}); 

Answer 1

Mit trigger immer wechseln der Staat, Wenn also einige Elemente überprüft werden und andere nicht, funktioniert es nicht.

Stattdessen können Sie so etwas wie

$(document).on('click', '.selectAllcountry', function(e) { 
 
    var $checks = $('.chkCountry'); 
 
    $checks.prop('checked', !$checks.is(':checked')) 
 

 
    e.stopPropagation(); 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div class="countryAll"> 
 
    <span class="countrySelect_lngTrans_Translatable" title="Select  All"> 
 
       <input type="button" class="selectAllcountry" /> 
 
      </span> 
 
    <span class="displayData">Select whole country</span> 
 
</div> 
 
<input class="chkCountry" type="checkbox" /> 
 
<input class="chkCountry" type="checkbox" /> 
 
<input class="chkCountry" type="checkbox" /> 
 
<input class="chkCountry" type="checkbox" />

Answer 2

try this ....

$(document).on('click', 'input.selectAllcountry', function(e) { 
     if ($('input.selectAllcountry').is(':checked')) 
    { 
     $('.chkCountry').prop('checked',true); 
    } 
    else 
    $('.chkCountry').prop('checked',false); 

}); 

Answer 3

Try this

$('.selectAllcountry').on('click', function(){ 
    if ($('.selectAllcountry').is(':checked')) {  
     $('.chkCountry').find(':checkbox').prop('checked', true); 
    } else { 
     $('.chkCountry').find(':checkbox').prop('checked', false); 
    } 
}); 

Answer 4

var chkStatus = true; 
 
$('.selectAllcountry').click(function() { 
 
    $('.countryAll').find(':checkbox').prop('checked', chkStatus); 
 
    chkStatus = !chkStatus; 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div class="countryAll"> 
 
    <span class="countrySelect_lngTrans_Translatable" title="Select All"> 
 
       <input type="button" class="selectAllcountry" /> 
 
      </span> 
 
    <span class="displayData">Select whole country</span> 
 
    <br> 
 
    <br> 
 
    <input type="checkbox" name="vehicle" value="Bike">I have a bike 
 
    <br> 
 
    <input type="checkbox" name="vehicle" value="Bike">I have a bike 
 
    <br> 
 
    <input type="checkbox" name="vehicle" value="Bike">I have a bike 
 
    <br> 
 
    <input type="checkbox" name="vehicle" value="Bike">I have a bike 
 
    <br> 
 
    <input type="checkbox" name="vehicle" value="Bike">I have a bike 
 
    <br> 
 
    <input type="checkbox" name="vehicle" value="Bike">I have a bike 
 
    <br> 
 
    <input type="checkbox" name="vehicle" value="Bike">I have a bike 
 
    <br> 
 
    <input type="checkbox" name="vehicle" value="Bike">I have a bike 
 
    <br> 
 
</div>

Answer 5

versuchen, wie Sie den Teil der Auswahl gemacht haben, jetzt auf Abwahl konzentrieren.
alle Kontrollkästchen Eingänge auf einmal

$('input:checkbox').removeAttr('checked'); 

entfernen oder Sie können Klasse als Kennung hinzufügen und dann auf der Grundlage der Klasse geprüft Element entfernen.
für exa.

$('.chkCountry').removeAttr('checked'); 

Answer 6

Ich glaube, Sie einen Fehler im Code gemacht haben, haben Sie Klasse verwendet Attribut twise in html tag.I denke, das ist, warum es erste Klasse Attribut nehmen und andere ignoriert werden.

<div class="countryAll"> <span class="countrySelect_lngTrans_Translatable" title="Select All"> <input type="button" class="selectAllcountry" /> </span> <span class="displayData">Select whole country</span> </div>

bitte alle Klasse in einzelnen Klassenattribut kombinieren. Ich denke, es wird hilfreich sein.