Javascript Girl
  1. Javascript Girl
  3. Cochez la case à cocher
Intereting Posts
Les objets sont-ils enfoncés dans un tableau en javascript copie profonde ou peu profonde? Dopdownlist est en train d'être peuplé avec des valeurs limitées au lieu des valeurs de la collecte totale Comment puis-je stocker un ensemble d'objets? Une fonction JavaScript peut-elle se retourner? Comment puis-je trier une liste par ordre alphabétique en utilisant jQuery? Création d'un objet JS avec des méthodes de JSON Comment fusionner deux ensembles d'objets RequireJS chemins de configuration indiquant "tous les modules se trouvent dans ce fichier" Invocation du service WCF via Javascript Réagir + Redux avec un repos api? Angularjs passant les valeurs des paramètres dans la fonction ng-click JavaScript: vérifiez si le bouton CTRL a été pressé Comment faire une boucle et faire des éléments dans React.js sans un tableau d'objets à mapper? Obtenir jQuery tablesorter pour fonctionner avec des lignes de table cachées / groupées Envoi de plusieurs champs de saisie de fichiers par programme dans une forme

Cochez la case à cocher

J'ai créé une table avec beaucoup de cases à cocher, mais maintenant je souhaite pouvoir utiliser une case "universelle".

Comme ça: 

<tr> <th scope="row">Indice</th> <td><input type="checkbox" id="check1"></td> <td><input type="checkbox" id="check2"></td> <td><input type="checkbox" id="check3"></td> <td><button onclick="check()">Check Checkbox</button> <button onclick="uncheck()">Uncheck Checkbox</button></td> </tr>

Eh bien, j'ai fait cela sur javascript: 

 <script> function check() { document.getElementById("check1").checked=true document.getElementById("check2").checked=true document.getElementById("check3").checked=true } function uncheck() { document.getElementById("check1").checked=false document.getElementById("check2").checked=false document.getElementById("check3").checked=false } function selectAll(frmElement, chkElement) { // ... } document.getElementById("check_all_1").onclick = function() { selectAll(document.wizard_form, this); } </script>

Jusqu'à présent, bon … mais … l'idée est d'avoir des résultats à partir d'une base de données, et il n'y a pas de changement je fais ce javascript "check3", "check4" … Comment puis-je faire cela?

Une version simple de JavaScript simple (sans bibliothèque requise): 

 function checks (){ var button = this.className.indexOf('uncheckAll') === -1, row = this.parentNode.parentNode, inputs = row.getElementsByTagName('input'); for (var i = 0, len = inputs.length; i < len; i++) { if (inputs[i].type == 'checkbox') { inputs[i].checked = button; } } } var buttons = document.getElementsByTagName('button'); for (var i = 0, len = buttons.length; i < len; i++) { buttons[i].addEventListener('click', checks); }

Démo de JS Fiddle .

Ce qui précède permet d'éviter d'avoir à parcourir explicitement le DOM (qui, en utilisant parentNode.parentNode séquentiel … nécessite une connaissance approfondie de la structure HTML), en utilisant une caisse (simple) la closest() : 

 HTMLElement.prototype.closest = function (tagName) { tagName = tagName.toLowerCase(); var self = this, selfTag = self.tagName.toLowerCase(); return selfTag == tagName ? self : self.parentNode.closest(tagName); } function checks (){ var button = this.className.indexOf('uncheckAll') === -1, row = this.closest('tr'), inputs = row.getElementsByTagName('input'); for (var i = 0, len = inputs.length; i < len; i++) { if (inputs[i].type == 'checkbox') { inputs[i].checked = button; } } } var buttons = document.getElementsByTagName('button'); for (var i = 0, len = buttons.length; i < len; i++) { buttons[i].addEventListener('click', checks); }

Démo de JS Fiddle .

Les références:

  • document.getElementsByTagName() .
  • Element.addEventListener() .
  • Element.tagName .
  • Node.parentNode .
  • String.toLowerCase() .

Essaye ça 

 function selectAll(chkElement) { checkboxes = document.getElementsByName('n'); for(var checkbox in checkboxes) checkbox.checked = chkElement.checked; }

Où 'n' est le nom

Essaye ça 

 <table> <tr> <th scope="row"> <input type="checkbox" id="checkAll" onclick="javascript: return CheckAllCheckboxes(this); "> </th> <tr> <td> <input type="checkbox" id="check1"> </td> </tr> <tr> <td> <input type="checkbox" id="check2"> </td> </tr> <tr> <td> <input type="checkbox" id="check3"> </td> </tr>

JS 

 CheckAllCheckboxes = function (current) { var state = $(current).is(':checked'); $('input[type="checkbox"]').each(function () { $(this).attr('checked', state); }); };

Vous pouvez vérifier la démo de violon

Une autre option

Avec jQuery click event 

 $(':checkbox').not('#checkAll').change(function () { $("#checkAll").attr("checked", $(":checkbox").not(":checked").not("#checkAll").length ? false : true); }); $("#checkAll").change(function () { $(':checkbox').attr('checked', this.checked); });

Vous pouvez vérifier la démo de violon

essaye ça. Il fonctionnera comme nous aussi dynamiquement que nous. 

 <table> <tr id="trCheck"> <td> <input type="checkbox" name="chk1" id="chk1"/> <input type="checkbox" name="chk2" id="chk2"/> </td> </tr> <tr> <td> <input type="button" name="btnSubmit" onclick="check();" value="Check/Uncheck" /> </td> </tr> </table> function check() { if ($('#trCheck').find('[type="checkbox"]').attr('checked') == false) $('#trCheck').find('[type="checkbox"]').attr('checked', true); else $('#trCheck').find('[type="checkbox"]').attr('checked', false); }

Si les résultats proviennent d'une base de données, lorsque vous faites une boucle dans les résultats de la base de données et que vous ajoutez la case à cocher à la page, faites simplement … 

 <td><input type="checkbox" checked /></td>

De plus, assurez-vous de terminer la balise avec une barre oblique.