Comment implémenter la case «sélectionner tout» en HTML?

218

J'ai une page HTML avec plusieurs cases à cocher.

J'ai besoin d'une case à cocher supplémentaire du nom "sélectionner tout". Lorsque je coche cette case, toutes les cases de la page HTML doivent être cochées. Comment puis-je faire ceci?

user48094
la source
1
Si vous souhaitez vous dégrader gracieusement, la sélection de "tout sélectionner" devrait en fait signifier que tous sont sélectionnés indépendamment de leur état individuel. (visite de votre page avec javascript désactivé)
certains
Dans Firefox (et peut-être d'autres?): Appuyez sur CTRL+SHIFT+Kpour ouvrir la console, puis collez : $("input:checkbox").attr('checked', true)et appuyez sur Enter. Toutes les cases à cocher de la page actuelle doivent maintenant être cochées. Pour un chèque- changement Trueà False.
ashleedawg

Réponses:

308
<script language="JavaScript">
function toggle(source) {
  checkboxes = document.getElementsByName('foo');
  for(var checkbox in checkboxes)
    checkbox.checked = source.checked;
}
</script>

<input type="checkbox" onClick="toggle(this)" /> Toggle All<br/>

<input type="checkbox" name="foo" value="bar1"> Bar 1<br/>
<input type="checkbox" name="foo" value="bar2"> Bar 2<br/>
<input type="checkbox" name="foo" value="bar3"> Bar 3<br/>
<input type="checkbox" name="foo" value="bar4"> Bar 4<br/>

METTRE À JOUR:

La for each...inconstruction ne semble pas fonctionner, du moins dans ce cas, dans Safari 5 ou Chrome 5. Ce code devrait fonctionner dans tous les navigateurs:

function toggle(source) {
  checkboxes = document.getElementsByName('foo');
  for(var i=0, n=checkboxes.length;i<n;i++) {
    checkboxes[i].checked = source.checked;
  }
}
Can Berk Güder
la source
1
pour chacun (case à cocher var dans les cases à cocher) --------------------------------------- devrait: pour (var case à cocher dans les cases à cocher)
HelloWorld
@HelloWorld: pour chaque ... en est en fait Javascript valide: developer.mozilla.org/en/Core_JavaScript_1.5_Reference/… Mais, comme l'a souligné porneL, c'est une construction obscure. En outre, ce code ne fonctionne pas dans Safari 5 ou Chrome 5. Il fonctionne dans FF 3.6 et IIRC, il a fonctionné dans Safari 4. for(var i in checkboxes) checkboxes[i].checked = source.checkedfonctionne dans tous les navigateurs.
Can Berk Güder
3
Ne jamais utiliser for inavec une collection ou un tableau
mplungjan
1
Pourquoi faites-vous , n=checkboxes.length;i<nau lieu de juste i < checkboxes.length? Quoi qu'il en soit, pour rendre la fonction générique (réutilisation du code), passez un paramètre supplémentaire: (source, checkboxes_name)et faites document.getElementsByName(checkboxes_name);C'est mieux que de coder en dur le nom et de rendre la fonction spécifique à un ensemble particulier de cases à cocher.
ADTC du
3
Très bien, comme mon montage a été rejeté pour une raison quelconque, je suppose que je vais commenter ici. La construction for-each est obsolète et ne fonctionnera pas! Vous devez utiliser son remplacement: for(let checkbox of checkboxes).
forresthopkinsa
126

Utilisation de jQuery :

// Listen for click on toggle checkbox
$('#select-all').click(function(event) {   
    if(this.checked) {
        // Iterate each checkbox
        $(':checkbox').each(function() {
            this.checked = true;                        
        });
    } else {
        $(':checkbox').each(function() {
            this.checked = false;                       
        });
    }
});

HTML:

<input type="checkbox" name="checkbox-1" id="checkbox-1" />
<input type="checkbox" name="checkbox-2" id="checkbox-2" />
<input type="checkbox" name="checkbox-3" id="checkbox-3" />

<!-- select all boxes -->
<input type="checkbox" name="select-all" id="select-all" />
davydepauw
la source
24
j'ajouterais une clause else pour gérer le cas d'utilisation de désélection, ;-) .. else {// Itérer chaque case à cocher $ (": case à cocher"). each (function () {this.checked = false;}); }
emeraldjava
4
Si vous voulez laisser de côté if et else et toujours gérer la désélection, vous pouvez le faire de cette façon: var state = this.checked; $ (': case à cocher'). each (function () {this.checked = state;});
Assil
85

Je ne suis pas sûr que personne n'ait répondu de cette manière (en utilisant jQuery ):

  $( '#container .toggle-button' ).click( function () {
    $( '#container input[type="checkbox"]' ).prop('checked', this.checked)
  })

Il est propre, n'a pas de boucles ou de clauses if / else et fonctionne comme un charme.

fiatjaf
la source
4
Seulement trois lignes, simple => facile à comprendre et fonctionne également pour la désélection. Je vous remercie.
TeeJay
61

Pour le désélectionner:

$('#select_all').click(function(event) {
  if(this.checked) {
      // Iterate each checkbox
      $(':checkbox').each(function() {
          this.checked = true;
      });
  }
  else {
    $(':checkbox').each(function() {
          this.checked = false;
      });
  }
});
Var
la source
2
si et si ce n'est pas nécessaire ... utilisez simplement à la this.checkedplace
m13r
46

Je suis surpris que personne n'ait mentionné document.querySelectorAll(). Solution JavaScript pure, fonctionne dans IE9 +.

function toggle(source) {
    var checkboxes = document.querySelectorAll('input[type="checkbox"]');
    for (var i = 0; i < checkboxes.length; i++) {
        if (checkboxes[i] != source)
            checkboxes[i].checked = source.checked;
    }
}
<input type="checkbox" onclick="toggle(this);" />Check all?<br />

<input type="checkbox" />Bar 1<br />
<input type="checkbox" />Bar 2<br />
<input type="checkbox" />Bar 3<br />
<input type="checkbox" />Bar 4<br />

Sumit
la source
1
cela fonctionnait dans Chrome, mais j'avais beaucoup de cases à cocher pour différentes raisons, donc au lieu de cibler 'type = "case à cocher"', j'ai ciblé 'name = "monobjet"' et cela a également fonctionné.
Rich701
Peut-être que cela devrait être changé pour la nouvelle bonne réponse, sinon une discussion serait utile. :-)
Jesse Steele
Cette réponse était beaucoup plus facile à implémenter dans les pages existantes que les autres réponses. bon travail.
TS
16

Démo http://jsfiddle.net/H37cb/

<script type="text/javascript" src="http://code.jquery.com/jquery-latest.min.js" /></script>

<script type="text/javascript">
$(document).ready(function(){

$('input[name="all"],input[name="title"]').bind('click', function(){
var status = $(this).is(':checked');
$('input[type="checkbox"]', $(this).parent('li')).attr('checked', status);
});

});
</script>




<div id="wrapper">
 <li style="margin-top: 20px">
  <input type="checkbox" name="all" id="all" /> <label for='all'>All</label>
  <ul>
   <li><input type="checkbox" name="title" id="title_1" /> <label for="title_1"><strong>Title 01</strong></label>
    <ul>
     <li><input type="checkbox" name="selected[]" id="box_1" value="1" /> <label for="box_1">Sub Title 01</label></li>
     <li><input type="checkbox" name="selected[]" id="box_2" value="2" /> <label for="box_2">Sub Title 02</label></li>
     <li><input type="checkbox" name="selected[]" id="box_3" value="3" /> <label for="box_3">Sub Title 03</label></li>
     <li><input type="checkbox" name="selected[]" id="box_4" value="4" /> <label for="box_4">Sub Title 04</label></li>
    </ul>
   </li>
  </ul>
  <ul>
   <li><input type="checkbox" name="title" id="title_2" /> <label for="title_2"><strong>Title 02</strong></label>
    <ul>
     <li><input type="checkbox" name="selected[]" id="box_5" value="5" /> <label for="box_5">Sub Title 05</label></li>
     <li><input type="checkbox" name="selected[]" id="box_6" value="6" /> <label for="box_6">Sub Title 06</label></li>
     <li><input type="checkbox" name="selected[]" id="box_7" value="7" /> <label for="box_7">Sub Title 07</label></li>
    </ul>
   </li>
  </ul>
 </li>
</div>
merakli
la source
1
Pour moi, cela ne fonctionne que pour un seul cycle, il ne bascule qu'une seule fois puis ne fait rien.
mrudult
C'est donc la attr()méthode, je suppose. changé enprop()
mrudult
Eh bien, si je désélectionne un élément de la liste, la case Sélectionner tout ne devrait-elle pas être également désélectionnée?
some_other_guy
10

Version légèrement modifiée qui vérifie et décoche avec respect

$('#select-all').click(function(event) {
        var $that = $(this);
        $(':checkbox').each(function() {
            this.checked = $that.is(':checked');
        });
    });
p0rsche
la source
10

Lorsque vous appelez document.getElementsByName("name"), vous obtiendrez un Object. Utilisez .item(index)pour parcourir tous les éléments d'unObject

HTML:

<input type="checkbox" onclick="for(c in document.getElementsByName('rfile')) document.getElementsByName('rfile').item(c).checked = this.checked">

<input type=​"checkbox" name=​"rfile" value=​"/​cgi-bin/​"><input type=​"checkbox" name=​"rfile" value=​"/​includes/​"><input type=​"checkbox" name=​"rfile" value=​"/​misc/​"><input type=​"checkbox" name=​"rfile" value=​"/​modules/​"><input type=​"checkbox" name=​"rfile" value=​"/​profiles/​"><input type=​"checkbox" name=​"rfile" value=​"/​scripts/​"><input type=​"checkbox" name=​"rfile" value=​"/​sites/​"><input type=​"checkbox" name=​"rfile" value=​"/​stats/​"><input type=​"checkbox" name=​"rfile" value=​"/​themes/​">
Chen Yang
la source
9
<html>

<head>
<script type="text/javascript">

    function do_this(){

        var checkboxes = document.getElementsByName('approve[]');
        var button = document.getElementById('toggle');

        if(button.value == 'select'){
            for (var i in checkboxes){
                checkboxes[i].checked = 'FALSE';
            }
            button.value = 'deselect'
        }else{
            for (var i in checkboxes){
                checkboxes[i].checked = '';
            }
            button.value = 'select';
        }
    }
</script>
</head>

<body>
<input type="checkbox" name="approve[]" value="1" />
<input type="checkbox" name="approve[]" value="2" />
<input type="checkbox" name="approve[]" value="3" />

<input type="button" id="toggle" value="select" onClick="do_this()" />
</body>

</html>
KarenAnne
la source
9

Ma solution simple permet de sélectionner / désélectionner de manière sélective toutes les cases à cocher dans une partie donnée du formulaire , tout en utilisant des noms différents pour chaque case à cocher, afin qu'elles puissent être facilement reconnues après la publication du formulaire.

Javascript:

function setAllCheckboxes(divId, sourceCheckbox) {
    divElement = document.getElementById(divId);
    inputElements = divElement.getElementsByTagName('input');
    for (i = 0; i < inputElements.length; i++) {
        if (inputElements[i].type != 'checkbox')
            continue;
        inputElements[i].checked = sourceCheckbox.checked;
    }
}

Exemple HTML:

<p><input onClick="setAllCheckboxes('actors', this);" type="checkbox" />All of them</p>
<div id="actors">
    <p><input type="checkbox" name="kevin" />Spacey, Kevin</p>
    <p><input type="checkbox" name="colin" />Firth, Colin</p>
    <p><input type="checkbox" name="scarlett" />Johansson, Scarlett</p>
</div>

J'espère que tu aimes!

Giorgio Barchiesi
la source
9

Essayez cette simple JQuery:

$('#select-all').click(function(event) {
  if (this.checked) {
    $(':checkbox').prop('checked', true);
  } else {
    $(':checkbox').prop('checked', false);
  }
});
Divyank Sabhaya
la source
1
Vous pouvez simplifier cela $(':checkbox').prop('checked', this.checked), pas besoin du conditionnel.
Sumit
7

Cet exemple fonctionne avec JavaScript natif où le nom de variable de case à cocher varie, c'est-à-dire pas tous "foo".

<!DOCTYPE html>
<html>
<body>

<p>Toggling checkboxes</p>
<script>
function getcheckboxes() {
    var node_list = document.getElementsByTagName('input');
    var checkboxes = [];
    for (var i = 0; i < node_list.length; i++) 
    {
        var node = node_list[i];
        if (node.getAttribute('type') == 'checkbox') 
    {
            checkboxes.push(node);
        }
    } 
    return checkboxes;
}
function toggle(source) {
  checkboxes = getcheckboxes();
  for(var i=0, n=checkboxes.length;i<n;i++) 
  {
    checkboxes[i].checked = source.checked;
  }
}
</script>


<input type="checkbox" name="foo1" value="bar1"> Bar 1<br/>
<input type="checkbox" name="foo2" value="bar2"> Bar 2<br/>
<input type="checkbox" name="foo3" value="bar3"> Bar 3<br/>
<input type="checkbox" name="foo4" value="bar4"> Bar 4<br/>

<input type="checkbox" onClick="toggle(this)" /> Toggle All<br/>

</body>
</html>
Joseph Saad
la source
2
votre getcheckboxesfonction pourrait être remplacée pardocument.querySelectorAll('input[type=checkbox]');
Kaiido
4
<asp:CheckBox ID="CheckBox1" runat="server" Text="Select All" onclick="checkAll(this);" />
<br />
<asp:CheckBoxList ID="CheckBoxList1" runat="server">
    <asp:ListItem Value="Item 1">Item 1</asp:ListItem>
    <asp:ListItem Value="Item 2">Item 2</asp:ListItem>
    <asp:ListItem Value="Item 3">Item 3</asp:ListItem>
    <asp:ListItem Value="Item 4">Item 4</asp:ListItem>
    <asp:ListItem Value="Item 5">Item 5</asp:ListItem>
    <asp:ListItem Value="Item 6">Item 6</asp:ListItem>
</asp:CheckBoxList>

<script type="text/javascript">
    function checkAll(obj1) {
        var checkboxCollection = document.getElementById('<%=CheckBoxList1.ClientID %>').getElementsByTagName('input');

        for (var i = 0; i < checkboxCollection.length; i++) {
            if (checkboxCollection[i].type.toString().toLowerCase() == "checkbox") {
                checkboxCollection[i].checked = obj1.checked;
            }
        }
    }
</script>
Charles
la source
3

qui devrait faire le travail:

    $(':checkbox').each(function() {
        this.checked = true;                        
    });
Rachid O
la source
2
$(document).ready(function() {
                $(document).on(' change', 'input[name="check_all"]', function() {
                    $('.cb').prop("checked", this.checked);
                });
            });
xrcwrn
la source
2

Utilisation de jQuery et knockout:

Avec cette case à cocher principale contraignante reste synchronisée avec les cases à cocher sous-jacentes, elle ne sera pas cochée à moins que toutes les cases à cocher soient cochées.

ko.bindingHandlers.allChecked = {
  init: function (element, valueAccessor) {
    var selector = valueAccessor();

    function getChecked () {
      element.checked = $(selector).toArray().every(function (checkbox) {
        return checkbox.checked;
      });
    }

    function setChecked (value) {
      $(selector).toArray().forEach(function (checkbox) {
        if (checkbox.checked !== value) {
          checkbox.click();
        }
      });
    }

    ko.utils.registerEventHandler(element, 'click', function (event) {
      setChecked(event.target.checked);
    });

    $(window.document).on('change', selector, getChecked);

    ko.utils.domNodeDisposal.addDisposeCallback(element, () => {
      $(window.document).off('change', selector, getChecked);
    });

    getChecked();
  }
};

en html:

<input id="check-all-values" type="checkbox" data-bind="allChecked: '.checkValue'"/>
<input id="check-1" type="checkbox" class="checkValue"/>
<input id="check-2" type="checkbox" class="checkValue"/>
blazkovicz
la source
Je ne connais pas assez le knockout (j'utilise ko3.4 de cdnjs.cloudflare.com mais cela ne semble pas fonctionner du tout. Je peux définir un point d'arrêt sur l'init initial: appel qui se déclenche lorsque la page se charge (ce qui, je suppose, est correct), mais y entrer ne donne rien - aucune des autres fonctions n'est exécutée. Définition du point d'arrêt sur les autres fonctions, et elles ne sont jamais déclenchées.
Tony Suffolk 66
Tony Suffolk, il y a deux gestionnaires d'événements définis: onclick et onchange pour la case à cocher, et la valeur de la case à cocher est mise à jour à la fin du code. Si ce code ne fonctionne pas dans votre projet, cochez la case Data-bind attribute for.
blazkovicz
2

Vous pouvez avoir différents ensembles de cases à cocher sur le même formulaire . Voici une solution qui sélectionne / désélectionne les cases à cocher par nom de classe, à l'aide de la fonction javascript vanilla document.getElementsByClassName

Le bouton Sélectionner tout

<input type='checkbox' id='select_all_invoices' onclick="selectAll()"> Select All

Certaines cases à cocher pour sélectionner

<input type='checkbox' class='check_invoice' id='check_123' name='check_123' value='321' />
<input type='checkbox' class='check_invoice' id='check_456' name='check_456' value='852' />

Le javascript

    function selectAll() {
        var blnChecked = document.getElementById("select_all_invoices").checked;
        var check_invoices = document.getElementsByClassName("check_invoice");
        var intLength = check_invoices.length;
        for(var i = 0; i < intLength; i++) {
            var check_invoice = check_invoices[i];
            check_invoice.checked = blnChecked;
        }
    }
Nicolas Giszpenc
la source
1
Ça marche. Veuillez consulter codepen.io/kustomweb/pen/gZqwLV
Nicolas Giszpenc
2

C'est ce que cela fera, par exemple si vous avez 5 cases à cocher, et que vous cliquez sur tout cocher, il coche tout, maintenant si vous décochez toutes les cases probablement en cliquant sur chacune des 5 cases à cocher, au moment où vous décochez la dernière case, la sélection toutes les cases à cocher sont également décochées

$("#select-all").change(function(){
   $(".allcheckbox").prop("checked", $(this).prop("checked"))
  })
  $(".allcheckbox").change(function(){
      if($(this).prop("checked") == false){
          $("#select-all").prop("checked", false)
      }
      if($(".allcheckbox:checked").length == $(".allcheckbox").length){
          $("#select-all").prop("checked", true)
      }
  })
samezedi
la source
2

Comme je ne peux pas commenter, voici une réponse: j'écrirais la solution de Can Berk Güder de manière plus générale, vous pouvez donc réutiliser la fonction pour d'autres cases à cocher

<script language="JavaScript">
  function toggleCheckboxes(source, cbName) {
    checkboxes = document.getElementsByName(cbName);
    for (var i = 0, n = checkboxes.length; i < n; i++) {
      checkboxes[i].checked = source.checked;
    }
  }
</script>
<input type="checkbox" onClick="toggleCheckboxes(this,\'foo\')" /> Toggle All<br/>

<input type="checkbox" name="foo" value="bar1"> Bar 1<br/>
<input type="checkbox" name="foo" value="bar2"> Bar 2<br/>
<input type="checkbox" name="foo" value="bar3"> Bar 3<br/>
<input type="checkbox" name="foo" value="bar4"> Bar 4<br/>
<input type="checkbox" name="foo" value="bar5"> Bar 5<br/>
user219901
la source
Merci khaldi et Clarity d'avoir signalé le support manquant!
user219901
2

Si vous adoptez la première réponse pour jquery, n'oubliez pas que l'objet transmis à la fonction click est un EventHandler, pas l'objet de case à cocher d'origine. Par conséquent, le code devrait être modifié comme suit.

Html

<input type="checkbox" name="selectThemAll"/> Toggle All<br/>

<input type="checkbox" name="foo" value="bar1"> Bar 1<br/>
<input type="checkbox" name="foo" value="bar2"> Bar 2<br/>
<input type="checkbox" name="foo" value="bar3"> Bar 3<br/>
<input type="checkbox" name="foo" value="bar4"> Bar 4<br/>

Javascript

$(function() {
    jQuery("[name=selectThemAll]").click(function(source) { 
        checkboxes = jQuery("[name=foo]");
        for(var i in checkboxes){
            checkboxes[i].checked = source.target.checked;
        }
    });
})
khylo
la source
non seulement le premier type d'entrée est incorrect, mais même après correction, cela n'a pas fonctionné pour moi
Messages d'erreur
1

Voici une implémentation de backbone.js:

events: {
    "click #toggleChecked" : "toggleChecked"
},
toggleChecked: function(event) {

    var checkboxes = document.getElementsByName('options');
    for(var i=0; i<checkboxes.length; i++) {
        checkboxes[i].checked = event.currentTarget.checked;
    }

},
zéros et uns
la source
1

html

<input class='all' type='checkbox'> All
<input class='item' type='checkbox' value='1'> 1
<input class='item' type='checkbox' value='2'> 2
<input class='item' type='checkbox' value='3'> 3

javascript

$(':checkbox.all').change(function(){
  $(':checkbox.item').prop('checked', this.checked);
});
diewland
la source
1

1: ajouter le gestionnaire d'événements onchange

<th><INPUT type="checkbox" onchange="checkAll(this)" name="chk[]" /> </th>

2: Modifier le code pour gérer coché / décoché

 function checkAll(ele) {
     var checkboxes = document.getElementsByTagName('input');
     if (ele.checked) {
         for (var i = 0; i < checkboxes.length; i++) {
             if (checkboxes[i].type == 'checkbox') {
                 checkboxes[i].checked = true;
             }
         }
     } else {
         for (var i = 0; i < checkboxes.length; i++) {
             console.log(i)
             if (checkboxes[i].type == 'checkbox') {
                 checkboxes[i].checked = false;
             }
         }
     }
 }
Sudhir Vishwakarma
la source
S'il vous plaît ne copiez pas le code de
collage
1

Les méthodes ci-dessous sont très faciles à comprendre et vous pouvez implémenter des formulaires existants en quelques minutes

Avec Jquery,

$(document).ready(function() {
  $('#check-all').click(function(){
    $("input:checkbox").attr('checked', true);
  });
  $('#uncheck-all').click(function(){
    $("input:checkbox").attr('checked', false);
  });
});

sous forme HTML mis en dessous des boutons

<a id="check-all" href="javascript:void(0);">check all</a>
<a id="uncheck-all" href="javascript:void(0);">uncheck all</a> 

En utilisant simplement javascript,

<script type="text/javascript">
function checkAll(formname, checktoggle)
{
  var checkboxes = new Array(); 
  checkboxes = document[formname].getElementsByTagName('input');

  for (var i=0; i<checkboxes.length; i++)  {
    if (checkboxes[i].type == 'checkbox')   {
      checkboxes[i].checked = checktoggle;
    }
  }
}
</script>

sous forme HTML mis en dessous des boutons

<button onclick="javascript:checkAll('form3', true);" href="javascript:void();">check all</button>

<button onclick="javascript:checkAll('form3', false);" href="javascript:void();">uncheck all</button>
dipenparmar12
la source
0

Vous pouvez utiliser ce code simple

$('.checkall').click(function(){
    var checked = $(this).prop('checked');
    $('.checkme').prop('checked', checked);
});
Saengdaet
la source
0

pour le faire en version abrégée en utilisant jQuery

La case à cocher Tout sélectionner

<input type="checkbox" id="chkSelectAll">

La case enfants

<input type="checkbox" class="chkDel">
<input type="checkbox" class="chkDel">
<input type="checkbox" class="chkDel">

jQuery

$("#chkSelectAll").on('click', function(){
     this.checked ? $(".chkDel").prop("checked",true) : $(".chkDel").prop("checked",false);  
})
Somwang Souksavatd
la source
0

Peut-être un peu tard, mais lorsque vous traitez une case à cocher tout, je pense que vous devriez également gérer le scénario lorsque vous avez coché la case tout cocher, puis décochez l'une des cases ci-dessous.

Dans ce cas, elle devrait automatiquement décocher la case à cocher tout.

De même, lorsque vous cochez manuellement toutes les cases à cocher, vous devriez vous retrouver avec la case à cocher Tout cocher automatiquement cochée.

Vous avez besoin de deux gestionnaires d'événements, un pour la case à cocher tout et un pour lorsque vous cliquez sur l'une des cases ci-dessous.

// HANDLES THE INDIVIDUAL CHECKBOX CLICKS
function client_onclick() {
    var selectAllChecked = $("#chk-clients-all").prop("checked");

    // IF CHECK ALL IS CHECKED, AND YOU'RE UNCHECKING AN INDIVIDUAL BOX, JUST UNCHECK THE CHECK ALL CHECKBOX.
    if (selectAllChecked && $(this).prop("checked") == false) {
        $("#chk-clients-all").prop("checked", false);
    } else { // OTHERWISE WE NEED TO LOOP THROUGH INDIVIDUAL CHECKBOXES AND SEE IF THEY ARE ALL CHECKED, THEN CHECK THE SELECT ALL CHECKBOX ACCORDINGLY.
        var allChecked = true;
        $(".client").each(function () {
            allChecked = $(this).prop("checked");
            if (!allChecked) {
                return false;
            }
        });
        $("#chk-clients-all").prop("checked", allChecked);
    }
}

// HANDLES THE TOP CHECK ALL CHECKBOX
function client_all_onclick() {
    $(".client").prop("checked", $(this).prop("checked"));
}
Albert
la source
-2

Simple et au POINT:

jQuery - En cliquant sur un bouton ou div ou un élément d'étiquette. Cochez toutes les cases de la page. Gardez à l'esprit que vous devrez ajuster: case à cocher pour le rendre plus spécifique.

jQuery("#My-Button").click(function() {

  jQuery(':checkbox').each(function() {
    if(this.checked == true) {
      this.checked = false;                        
    } else {
      this.checked = true;                        
    }      
  });

});
Patoshi パ ト シ
la source