jQuery: Επιλογή / αποεπιλογή των check boxes


nc
Δημοσίευση: • Share Article:

@Εάν η εφαρμογή σας περιέχει πολλά check boxes για επιλογή / αποεπιλογή, τότε είναι καλό να παρέχετε ένα check box που θα επιτρέπει στους χρήστες να επιλέγουν / αποεπιλέγουν όλα τα πλαίσια ελέγχου ταυτόχρονα. Ακολουθεί το παράδειγμα, ξεκινώντας από τον κώδικα html.

<div><input type="checkbox" name="checkall" id="checkall" />Select All</div>
<div id="countrylist" style="border-top: 1px solid grey; padding-top: 10px;">
    <div><input type="checkbox" name="country" id="country1" value="United States" />India</div>
    <div><input type="checkbox" name="country" id="country2" value="USA" />USA</div>
    <div><input type="checkbox" name="country" id="country3" value="UK" />UK</div>
    <div><input type="checkbox" name="country" id="country4" value="France" />France</div>
    <div><input type="checkbox" name="country" id="country5" value="Germany" />Germany</div>
</div>

Ο κώδικας σε jquery:

<script type="text/javascript">
$("#checkall").change(function () {
    $('input[name="country"]').prop('checked', $(this).prop("checked"));
});
</script>

Το παραπάνω σενάριο θα ενεργοποιείται κάθε φορά που αλλάζει η τιμή του πλαισίου ελέγχου #checkall (είτε επιλεγμένο είτε μη) και όλα τα πλαίσια ελέγχου με το όνομα "country" θα επιλέγονται ή θα αποεπιλέγονται ανάλογα. Εάν θέλετε να επιλέξετε/αποεπιλέξετε όλα τα πλαίσια ελέγχου στη φόρμα html, ανεξάρτητα από το όνομά τους, χρησιμοποιήστε αυτό το σενάριο:

$("#checkall").change(function () {
    $('input:checkbox').prop('checked', $(this).prop("checked"));
});

Foreach programming

Εγγραφείτε για να βλέπετε τα εξειδικευμένα άρθρα.