So wählen Sie alle Kontrollkästchen mit JQuery aus

Dieses Beispiel zeigt, wie Sie alle Kontrollkästchen mithilfe von JQuery auswählen. Dies ist eine der häufigsten Anforderungen in vielen Anwendungen: Wenn es auf einer Seite mehrere Kontrollkästchen gibt, müssen wir eine Option für „Alle auswählen“ beibehalten und wenn alle Kontrollkästchen ausgewählt wurden, standardmäßig auch das Kontrollkästchen „Alle auswählen“. ausgewählt werden. Hier habe ich ein einfaches Beispiel geschrieben, um das zu demonstrieren.

<!DOCTYPE html>
<html>
<head>
    <title>How to Check All Check Boxes using JQuery</title>
<script src="http://code.jquery.com/jquery-1.11.0.min.js"></script>
    <script type="text/javascript">
         $(function () {

            var chkId = '';
            $('.chkNumber:checked').each(function () {
                chkId += $(this).val() + ",";
            });
            chkId = chkId.slice(0, -1);

           $('.chkSelectAll').change(function () {
                $('.chkNumber').prop('checked', this.checked);
            });

     $('.chkNumber').change(function() { $('.chkSelectAll').prop('checked',$('.chkNumber:checked').length == $('.chkNumber').length);
     });

        });
    </script>
</head>
<body>
    <h2>Select All Check Boxes using JQuery</h2>
    <table id="mytable">
        <tr>
            <td>
                <input type="checkbox"   />SelectAll
            </td>
            <td><input type="checkbox"   value="1" />One</td>
            <td><input type="checkbox"   value="2" />Two</td>
            <td><input type="checkbox"   value="3" />Three</td>
            <td><input type="checkbox"   value="4" />Four</td>
            <td><input type="checkbox"   value="5" />Five<br /></td>
        </tr>
    </table>
</body>
</html>

JQuery CheckBox-Demo

  • Führen Sie diese Demo aus

Kontrollkästchen-alle

Kommentar verfassen

Deine E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind mit * markiert

Nach oben scrollen