Wie aktiviere ich alle Kontrollkästchen mit jQuery?

72

Ich benötige Hilfe bei jQuery-Selektoren. Angenommen, ich habe ein Markup wie unten gezeigt:

<form>
  <table>
    <tr>
      <td><input type="checkbox" id="select_all" /></td>
    </tr>
    <tr>
      <td><input type="checkbox" name="select[]" /></td>
    </tr>
    <tr>
      <td><input type="checkbox" name="select[]" /></td>
    </tr>
    <tr>
      <td><input type="checkbox" name="select[]" /></td>
    </tr>
  </table>
</form>
Erweitern Sie das Snippet

Wie erhalte ich alle Kontrollkästchen, außer #select_allwenn der Benutzer darauf klickt?

javascript jquery css checkbox css-selectors Darmen Amanbayev
quelle
Hier ist ein Link zu Codepen mit diesem Codepen.io/nickhq/pen/pZJVEr
Nixon Kosgei

Antworten:

111

Ein vollständigeres Beispiel, das in Ihrem Fall funktionieren sollte:

$('#select_all').change(function() {
  var checkboxes = $(this).closest('form').find(':checkbox');
  checkboxes.prop('checked', $(this).is(':checked'));
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<form>
  <table>
    <tr>
      <td><input type="checkbox" id="select_all" /></td>
    </tr>
    <tr>
      <td><input type="checkbox" name="select[]" /></td>
    </tr>
    <tr>
      <td><input type="checkbox" name="select[]" /></td>
    </tr>
    <tr>
      <td><input type="checkbox" name="select[]" /></td>
    </tr>
  </table>
</form>
Erweitern Sie das Snippet

Wenn das #select_allKontrollkästchen aktiviert ist, wird der Status des Kontrollkästchens aktiviert und alle Kontrollkästchen im aktuellen Formular werden auf denselben Status gesetzt.

Beachten Sie, dass Sie das #select_allKontrollkästchen nicht aus der Auswahl ausschließen müssen, da dies den gleichen Status wie alle anderen hat. Wenn Sie aus irgendeinem Grund das ausschließen müssen #select_all, können Sie Folgendes verwenden:

$('#select_all').change(function() {
  var checkboxes = $(this).closest('form').find(':checkbox').not($(this));
  checkboxes.prop('checked', $(this).is(':checked'));
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<form>
  <table>
    <tr>
      <td><input type="checkbox" id="select_all" /></td>
    </tr>
    <tr>
      <td><input type="checkbox" name="select[]" /></td>
    </tr>
    <tr>
      <td><input type="checkbox" name="select[]" /></td>
    </tr>
    <tr>
      <td><input type="checkbox" name="select[]" /></td>
    </tr>
  </table>
</form>
Erweitern Sie das Snippet

Tatu Ulmanen
quelle
14
Bei mir hat dies nur beim ersten Mal funktioniert (dh alle überprüfen, alle deaktivieren). Beim zweiten "Alle aktivieren" wurde keines der anderen Kontrollkästchen aktiviert. Ich benutzte checkboxes.prop('checked', true);und checkboxes.prop('checked', false);stattdessen aus dieser Antwort . Hoppla, ich habe gerade festgestellt, dass dies in den Antworten weiter unten auf der Seite erwähnt wird ...
Felix
3
In der jQuery-Dokumentation heißt es, dass dies $( "[type=checkbox]" )für moderne Browser schneller ist (schneller als $(':checkbox')).
Todd
51

Einfach und sauber:

$('#select_all').click(function() {
  var c = this.checked;
  $(':checkbox').prop('checked', c);
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<form>
  <table>
    <tr>
      <td><input type="checkbox" id="select_all" /></td>
    </tr>
    <tr>
      <td><input type="checkbox" name="select[]" /></td>
    </tr>
    <tr>
      <td><input type="checkbox" name="select[]" /></td>
    </tr>
    <tr>
      <td><input type="checkbox" name="select[]" /></td>
    </tr>
  </table>
</form>
Erweitern Sie das Snippet

LOL
quelle
4
Dies kann auch so gemacht werden ...$(':checkbox').prop('checked', this.checked);
Ankit Lamba
Subtil - Setzen Sie den aktivierten Status der abgerufenen Kontrollkästchen auf den Wert unseres kürzlich geänderten Kontrollkästchens "Master" - einfach, elegant und überraschend logisch, wenn Sie darüber nachdenken - Danke!
Big Rich
29

Die Top-Antwort funktioniert in Jquery 1.9+ aufgrund der attr () -Methode nicht. Verwenden Sie stattdessen prop ():

$(function() {
    $('#select_all').change(function(){
        var checkboxes = $(this).closest('form').find(':checkbox');
        if($(this).prop('checked')) {
          checkboxes.prop('checked', true);
        } else {
          checkboxes.prop('checked', false);
        }
    });
});
alexeydemin
quelle
Vielen Dank dafür, ich habe Ihre Implementierung mit JQuery 1.8.3 verwendet ;-)
Big Rich
1
Das OP hat die Antwort geändert, um mit den "letzten" Änderungen fertig zu werden :)
Erenor Paz
19 
$("form input[type='checkbox']").attr( "checked" , true );

oder Sie können die verwenden

: Kontrollkästchen Auswahl

$("form input:checkbox").attr( "checked" , true );

Ich habe Ihren HTML-Code umgeschrieben und einen Klick-Handler für das Haupt-Kontrollkästchen bereitgestellt

$(function(){
    $("#select_all").click( function() {
        $("#frm1 input[type='checkbox'].child").attr( "checked", $(this).attr("checked" ) );
    });
});

<form id="frm1">
    <table>
        <tr>
            <td>
                <input type="checkbox" id="select_all" />
            </td>
        </tr>
        <tr>
            <td>
                <input type="checkbox" name="select[]" class="child" />
            </td>
        </tr>
        <tr>
            <td>
                <input type="checkbox" name="select[]" class="child" />
            </td>
        </tr>
        <tr>
            <td>
                <input type="checkbox" name="select[]" class="child" />
            </td>
        </tr>
    </table>
</form>
rahul
quelle
Achten Sie nur darauf, nicht jedes Kontrollkästchen auf der Seite
Thiago Belem
Eigentlich ist die richtige Syntax .attr("checked", "checked").
Tatu Ulmanen
+1 Danke rahul, aber ich musste alle Kontrollkästchen finden, wenn der Benutzer auf das Kontrollkästchen #select_all klickt.
Darmen Amanbayev
3 
 $(function() {  
$('#select_all').click(function() {
    var checkboxes = $(this).closest('form').find(':checkbox');
    if($(this).is(':checked')) {
        checkboxes.attr('checked', 'checked');
    } else {
        checkboxes.removeAttr('checked');
    }
});
    });
Dragos Custura
quelle
3 
 $(document).ready(function(){
    $("#select_all").click(function(){
      var checked_status = this.checked;
      $("input[name='select[]']").each(function(){
        this.checked = checked_status;
      });
    });
  });
Beena Shetty
quelle
3 
jQuery(document).ready(function () {
        jQuery('.select-all').on('change', function () {
            if (jQuery(this).is(':checked')) {
                jQuery('input.class-name').each(function () {
                    this.checked = true;
                });
            } else {
                jQuery('input.class-name').each(function () {
                    this.checked = false;
                });
            }
        });
    });
Abdo-Host
quelle
Code ist großartig, aber eine Erklärung, warum es hilft, ist immer willkommen.
Rory McCrossan
2

Dieser Code funktioniert gut mit mir 

<script type="text/javascript">
$(document).ready(function(){ 
$("#select_all").change(function(){
  $(".checkbox_class").prop("checked", $(this).prop("checked"));
  });
});
</script>

Sie müssen nur allen Checkboxen die Klasse checkbox_class hinzufügen

Leicht und einfach: D.

Ahmed Al Bermawy
quelle
2 
$("#select_all").change(function () {

    $('input[type="checkbox"]').prop("checked", $(this).prop("checked"));

});
Robin Li
quelle
Vielen Dank für dieses Code-Snippet, das möglicherweise nur begrenzte, sofortige Hilfe bietet. Eine richtige Erklärung würde ihren langfristigen Wert erheblich verbessern, indem sie zeigt, warum dies eine gute Lösung für das Problem ist, und es für zukünftige Leser mit anderen, ähnlichen Fragen nützlicher machen. Bitte bearbeiten Sie Ihre Antwort, um eine Erklärung hinzuzufügen, einschließlich der von Ihnen getroffenen Annahmen.
Maximilian Peters
1

Angesichts des Problems funktioniert keine der oben genannten Antworten. Der Grund war im jQuery Uniform Plugin (Arbeit mit Theme Metronic ). Ich hoffe die Antwort wird nützlich sein :)

Arbeiten Sie mit jQuery Uniform

$('#select-all').change(function() {
    var $this = $(this);
    var $checkboxes = $this.closest('form')
        .find(':checkbox');

    $checkboxes.prop('checked', $this.is(':checked'))
        .not($this)
        .change();
});
Odin Thunder
quelle
1

Ein Kontrollkästchen, um alle zu regieren

Für Leute, die immer noch nach einem Plugin suchen, um Kontrollkästchen über ein leichtes zu steuern, das sofort einsatzbereite Unterstützung für UniformJS und iCheck bietet und deaktiviert wird, wenn mindestens eines der kontrollierten Kontrollkästchen deaktiviert ist (und aktiviert wird, wenn alle kontrollierten Kontrollkästchen aktiviert sind Natürlich) Ich habe ein jQuery checkAll-Plugin erstellt .

Schauen Sie sich die Beispiele auf der Dokumentationsseite an .

Für dieses Fragenbeispiel müssen Sie lediglich Folgendes tun:

$( '#select_all' ).checkall({
    target: 'input[type="checkbox"][name="select"]'
});

Ist das nicht klar und einfach?

nass
quelle
0 
$('.checkall').change(function() {
    var checkboxes = $(this).closest('table').find('td').find(':checkbox');
    if($(this).is(':checked')) {
        checkboxes.attr('checked', 'checked');
    } else {
        checkboxes.removeAttr('checked');
    }
});
Antyrat
quelle
0 
  $("#select_all").live("click", function(){
            $("input").prop("checked", $(this).prop("checked"));
    }
  });
user2821486
quelle
2
Fügen Sie eine Erklärung / einen Kommentar hinzu
Aleksander Lidtke
0

Ich bin jetzt Teil dieses Stils.

Ich habe Ihr Formular benannt und Ihrem Feld select_all einen 'onClick' hinzugefügt.

Ich habe auch das Kontrollkästchen 'select_all' aus der jquery-Auswahl ausgeschlossen, damit das Internet nicht explodiert, wenn jemand darauf klickt. 

 function toggleSelect(formname) {
   // select the form with the name 'formname', 
   // then all the checkboxes named 'select[]'
   // then 'click' them
   $('form[name='+formname+'] :checkbox[name="select[]"]').click()
 }

 <form name="myform">
   <tr>
        <td><input type="checkbox" id="select_all"    
                   onClick="toggleSelect('myform')" />
        </td>
    </tr>
    <tr>
        <td><input type="checkbox" name="select[]"/></td>
    </tr>
    <tr>
        <td><input type="checkbox" name="select[]"/></td>
    </tr>
    <tr>
        <td><input type="checkbox" name="select[]"/></td>
    </tr>
</table>

FlipMcF
quelle
0

Hier ist ein grundlegendes jQuery-Plugin, das ich geschrieben habe und das alle Kontrollkästchen auf der Seite auswählt, mit Ausnahme des Kontrollkästchens / Elements, das als Umschalter verwendet werden soll:

(function($) {
    // Checkbox toggle function for selecting all checkboxes on the page
    $.fn.toggleCheckboxes = function() {
        // Get all checkbox elements
        checkboxes = $(':checkbox').not(this);

        // Check if the checkboxes are checked/unchecked and if so uncheck/check them
        if(this.is(':checked')) {
            checkboxes.prop('checked', true);
        } else {
            checkboxes.prop('checked', false);
        }
    }
}(jQuery));

Rufen Sie dann einfach die Funktion Ihres Kontrollkästchens oder Schaltflächenelements auf:

// Check all checkboxes
$('.check-all').change(function() {
    $(this).toggleCheckboxes();
});
Gareth Daine
quelle