jquery select all checkboxes

Question

J'ai une série de cases à cocher qui sont chargées 100 par 100 via ajax.

J'ai besoin de ce jquery pour me permettre d'avoir un bouton qui, lorsqu'il est pressé, vérifie tout ce qui est à l'écran. Si d'autres sont chargés, et que le bouton est pressé, tout peut être désactivé, puis pressé à nouveau pour tout réactiver.

C'est ce que j'ai, évidemment ça ne fonctionne pas pour moi.

$(function () {
 $('#selectall').click(function () {
  $('#friendslist').find(':checkbox').attr('checked', this.checked);
 });
});

Le bouton est #selectall les cases à cocher sont des classes .tf et ils résident tous dans une division parent appelée #check à l'intérieur d'un div appelé #friend à l'intérieur d'un div appelé #friendslist

Ejemplo:

<div id='friendslist'>
    <div id='friend'>
        <div id='check'>
            <input type='checkbox' class='tf' name='hurr' value='durr1'>
        </div>
    </div>
    <div id='friend'>
        <div id='check'>
            <input type='checkbox' class='tf' name='hurr' value='durr2'>
        </div>
    </div>
    <div id='friend'>
        <div id='check'>
            <input type='checkbox' class='tf' name='hurr' value='durr3'>
        </div>
    </div>
</div>

<input type='button' id='selectall' value="Select All">

Answer 1

Je sais que je revisite un vieux sujet, mais cette page apparaît comme l'un des premiers résultats dans Google lorsque cette question est posée. Je reviens sur ce sujet parce que dans jQuery 1.6 et plus, prop() devrait être utilisé pour le statut "vérifié" au lieu de attr() avec true ou false passé. Plus d'infos aquí .

Par exemple, le code d'Henrick devrait maintenant être :

$(function () {
    $('#selectall').toggle(
        function() {
            $('#friendslist .tf').prop('checked', true);
        },
        function() {
            $('#friendslist .tf').prop('checked', false);
        }
    );
});

Answer 2

$('#friendslist .tf')

ce sélecteur répondra à vos besoins

Answer 3

Utilisez la fonction jquery toggle. Vous pouvez ensuite effectuer toutes les autres modifications que vous souhaitez effectuer en même temps que ces changements... comme modifier la valeur du bouton pour qu'il dise "tout cocher" ou "tout décocher".

$(function () {
    $('#selectall').toggle(
        function() {
            $('#friendslist .tf').attr('checked', 'checked');
        },
        function() {
            $('#friendslist .tf').attr('checked', '');
        }
    );
});

Answer 4

Un contrôle/décontrôle très simple sans besoin de boucle

<input type="checkbox" id="checkAll" /> Check / Uncheck All

<input type="checkbox" class="chk" value="option1" /> Option 1
<input type="checkbox" class="chk" value="option2" /> Option 2
<input type="checkbox" class="chk" value="option3" /> Option 3

Et la comptabilité javascript (jQuery) pour "undefined" sur la valeur de la checkbox

** MISE À JOUR - utilisation de .prop() **

$("#checkAll").change(function(){
    var status = $(this).is(":checked") ? true : false;
    $(".chk").prop("checked",status);
});

---

** Suggestion précédente - peut ne pas fonctionner **

$("#checkAll").change(function(){
    var status = $(this).attr("checked") ? "checked" : false;
    $(".chk").attr("checked",status);
});

OU avec la suggestion du post suivant utilisant .prop() combiné en une seule ligne

$("#checkAll").change(function(){
    $(".chk").attr("checked",$(this).prop("checked"));
});

Answer 5

Peut-être essayer ceci :

$(function () {
    $('#selectall').click(function () {
        $('#friendslist .tf').attr('checked', this.checked);
    });
});