Javascript Girl
  1. Javascript Girl
  3. Checkboxes + Jquery hide / show
Intereting Posts
Prix ​​de mise à jour Javascript sélectionnez onchange "Undefined" est retourné lors de l'accès à certaines propriétés listées de l'objet Fichier Mettre à jour UpdatePanel manuellement en utilisant JavaScript ou jQuery Comment autoriser uniquement les caractères définis comme entrée en utilisant jQuery? Un formulaire qui permet de redirection du navigateur lorsqu'il est consulté par une demande de formulaire régulière ou une requête Ajax – est-ce possible? Comment détecter une fonction JavaScript avec une certaine signature a-t-elle été enregistrée? Comment annuler une fonction javascript CSS révèle de l'animation du coin Simplifiez le code javascript en utilisant regex (obtenant plusieurs liens vers iframes youtube) Comment puis-je écrire un interprète pour cela en javascript? L'imbrication du filtre a échoué dans Jade Comment rendre les composants enfants en réaction. Js récursivement Modification de la position de la barre de défilement Pourquoi le code phantomjs ne passe-t-il pas sur le tableau? Trier les données de la base de travail en ordre décroissant en utilisant l'horodatage négatif

Checkboxes + Jquery hide / show

J'ai une série d'une série de lignes et de cases à cocher pour les filtrer: 

<ul> <li><input id="type-A" type="checkbox" checked="checked"> <a href="/A">A</a></li> <li><input id="type-B" type="checkbox" checked="checked"> <a href="/B">B</a></li> <li><input id="type-C" type="checkbox" checked="checked"> <a href="/C">C</a></li> <li><input id="type-D" type="checkbox" checked="checked"> <a href="/D">D</a></li> <li><input id="type-E" type="checkbox" checked="checked"> <a href="/E">E</a></li> <li><input id="type-F" type="checkbox" checked="checked"> <a href="/F">F</a></li> </ul> <table> <tr class="A">filler</tr> <tr class="B">filler</tr> <tr class="AB">filler</tr> <tr class="CD">filler</tr> <tr class="AF">filler</tr> <tr class="AEF">filler</tr> <tr class="F">filler</tr> <tr class="CDE">filler</tr> <tr class="ABCDEF">filler</tr> </table>

J'aimerais cacher / afficher des lignes en fonction de ce qui est vérifié. Actuellement, j'utilise (avec l'aide de cette question précédente: utilisez "ceci" pour simplifier le code (jQuery simple) ): 

 $(function(){ $("input[id^='type-']").change(function() { $("."+this.id.replace('type-','')).toggle(this.checked); }).change(); });

Ce qui permet de basculer ce qui est montré chaque fois qu'une boîte est cliquée et fonctionne très bien si chaque ligne n'a qu'une seule classe. Mais ils ne le font pas. Comment il est configuré maintenant, l'ordre de clic change les lignes qui s'affichent. J'ai donc besoin de créer une fonction qui vérifie les cases à cocher et qui montre les lignes qui contiennent l'une d'elles. Je ne suis pas opposé à l'ajout d'un bouton pour que cela se produise.

J'apprécierais toute aide (et la direction des ressources qui pourraient m'aider à apprendre) que vous pouvez me donner!

Modifiez la fonction pour obtenir un sélecteur pour toutes les cases à cocher vérifiées. 

 $(function(){ var $checkboxes = $("input[id^='type-']"); $checkboxes.change(function() { var selector = ''; $checkboxes.filter(':checked').each(function(){ // checked selector += '.' + this.id.replace('type-','') + ', '; // builds a selector like '.A, .B, .C, ' }); selector = selector.substring(0, selector.length - 2); // remove trailing ', ' // tr selector $('table tr').hide() // hide all rows .filter(selector).show(); // reduce set to matched and show }).change(); });

EDIT: voir jsfiddle

JQuery a créé cette fonction pour vous! C'est ce qu'on appelle .filter() , et il faut une chaîne de sélection, une fonction, un élément DOM brute ou un objet jQuery. Dans votre cas, je lui transmettrai une chaîne de sélection. Nous pouvons utiliser le sélecteur :has() de jQuery's, qui prend un sélecteur et renvoie les éléments correspondants. Donc, si vous souhaitez sélectionner toutes les lignes (éléments li ) qui contiennent des cases cochées, vous pouvez le faire comme ceci: 

 $("li").filter(":has(input:checked)");

Ou, nous pourrions éliminer notre appel pour filter() et simplement passer le sélecteur entier à $() : 

 $("li:has(input:checked)");

Cela renverra tous les éléments li qui contiennent des cases cochées n'importe où parmi les descendants, et pas seulement les enfants directs.

Et le mettre dans le contexte de votre gestionnaire .change() :

Je suppose que vous souhaitez afficher des éléments de type qui ont le même type que les éléments li qui contiennent des cases à cocher cochées et cacher tous les éléments qui ne le sont pas. Nous utilisons donc la fonction .toggle() , qui permet de visualiser les éléments: 

 $(function(){ $("input[id^='type-']").change(function() { $("."+this.id.replace('type-','')).toggle(this.checked); // show any tr elements that have the class relating to the type of the inputs that contain checked checkboxes... $("li:has(input:checked)").each(function() { $("tr" + "." + this.id.replace(/type-/, "")).toggle(); }); }).change(); }); 
  $("table tr").hide(); $("input[id^='type-']").each(function() { element = $(this); $("table tr").each(function() { if($(this).hasClass(element.id.replace('type-','')) { if(element.is(":checked") { element.show(); } } }); }).change();