it-swarm.com.de

Markieren Sie alle Kontrollkästchen mit jQuery

Ich brauche 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 bekomme ich alle Kontrollkästchen außer #select_all, wenn der Benutzer darauf klickt?
.__ Jede Hilfe wird geschätzt.

63
Darmen

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

Wenn das Kontrollkästchen #select_all angeklickt wird, wird der Status des Kontrollkästchens markiert, und alle Kontrollkästchen im aktuellen Formular werden auf denselben Status gesetzt.

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

var checkboxes = $(this).closest('form').find(':checkbox').not($(this));
98
Tatu Ulmanen

einfach und sauber

$('#select_all').click(function() {
    var c = this.checked;
    $(':checkbox').prop('checked',c);
});
46
LOL

Die erste Antwort funktioniert aufgrund der attr () - Methode nicht in Jquery 1.9+ 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);
        }
    });
});
29
ademin
$("form input[type='checkbox']").attr( "checked" , true );

oder Sie können das verwenden

: Ankreuzfeld Auswahl

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

Ich habe Ihren HTML-Code umgeschrieben und einen Click-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>
15
rahul
 $(document).ready(function(){
    $("#select_all").click(function(){
      var checked_status = this.checked;
      $("input[name='select[]']").each(function(){
        this.checked = checked_status;
      });
    });
  });
3
Beena Shetty
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;
                });
            }
        });
    });
3
Abdo-Host
 $(function() {  
$('#select_all').click(function() {
    var checkboxes = $(this).closest('form').find(':checkbox');
    if($(this).is(':checked')) {
        checkboxes.attr('checked', 'checked');
    } else {
        checkboxes.removeAttr('checked');
    }
});
    });
3
Dragos Custura
$("#select_all").change(function () {

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

});  
2
Robin Li

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 lediglich class checkbox_class zu allen Checkboxen hinzufügen

Einfach und einfach: D

2

Angesichts des Problems funktioniert keine der oben genannten Antworten nicht. Der Grund war in jQuery Uniform Plugin (Arbeit mit theme metronic ).

Arbeit 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();
});
1
Odin Thunder

Eine Checkbox, um sie alle anzuordnen

Für Leute, die noch nach einem Plugin suchen, um Kontrollkästchen durch ein Kontrollkästchen zu steuern, das über ein geringes Gewicht verfügt, sofortige Unterstützung für UniformJS und iCheck bietet und nicht aktiviert wird, wenn mindestens eines der Kontrollkästchen deaktiviert ist (und aktiviert wird, wenn alle Kontrollkästchen aktiviert sind) natürlich) Ich habe ein jQuery checkAll Plugin erstellt.

Schauen Sie sich die Beispiele auf Dokumentationsseite an.


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

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

Ist das nicht klar und einfach?

1
simivar
$('.checkall').change(function() {
    var checkboxes = $(this).closest('table').find('td').find(':checkbox');
    if($(this).is(':checked')) {
        checkboxes.attr('checked', 'checked');
    } else {
        checkboxes.removeAttr('checked');
    }
});
0
user955787
  $("#select_all").live("click", function(){
            $("input").prop("checked", $(this).prop("checked"));
    }
  });
0
user2821486

Hier ist ein einfaches jQuery-Plugin, das ich geschrieben habe und das alle Kontrollkästchen auf der Seite auswählt, mit Ausnahme des Kontrollkästchens/Elements, das als Toggle 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));

Dann rufen Sie einfach die Funktion in Ihrer Checkbox oder Ihrem Schaltflächenelement auf:

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

Ich bin jetzt ein Teil dieses Stils.

Ich habe Ihr Formular benannt und Ihrer select_all-Box ein "onClick" hinzugefügt.

Ich habe auch das Kontrollkästchen 'select_all' von 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>

0
FlipMcF