Wie aktiviere ich alle Kontrollkästchen mit jQuery?

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>

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

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>

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>

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>

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);
        }
    });
});

$("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>

 $(function() {  
$('#select_all').click(function() {
    var checkboxes = $(this).closest('form').find(':checkbox');
    if($(this).is(':checked')) {
        checkboxes.attr('checked', 'checked');
    } else {
        checkboxes.removeAttr('checked');
    }
});
    });

 $(document).ready(function(){
    $("#select_all").click(function(){
      var checked_status = this.checked;
      $("input[name='select[]']").each(function(){
        this.checked = checked_status;
      });
    });
  });

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;
                });
            }
        });
    });

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.

$("#select_all").change(function () {

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

});  

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();
});

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?

$('.checkall').change(function() {
    var checkboxes = $(this).closest('table').find('td').find(':checkbox');
    if($(this).is(':checked')) {
        checkboxes.attr('checked', 'checked');
    } else {
        checkboxes.removeAttr('checked');
    }
});

  $("#select_all").live("click", function(){
            $("input").prop("checked", $(this).prop("checked"));
    }
  });

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>

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();
});