Jquery Désélectionner tout Case à cocher Formulaires multiples

J'essaie de créer des filtres pour les utilisateurs, y compris une sélection/désélectionner toutes les fonctionnalités.Jquery Désélectionner tout Case à cocher Formulaires multiples

J'ai fondé beaucoup d'exemples corrects mais aucun d'entre eux n'a plus d'un filtre sur les démos, et maintenant il se comporte bizarrement.

Lorsque je clique sur (tous) pour filtre1 IT'IS fonctionne bien, mais pas (tous) pour filtre2 ...

jsFiddle:

https://jsfiddle.net/Max06270/pvtqpn8a/#&togetherjs=2tvV3Mhb7l

HTML:

<div id="filter1"> 
    <form action='#'> 
    <input type="checkbox" id="select-all" checked>(All)<br> 
    <!-- Should select/unselect only the F1 checkboxes --> 
    <input type="checkbox" id="checkbox-f1" checked>F1: Value1<br> 
    <input type="checkbox" id="checkbox-f1" checked>F1: Value2<br> 
    <input type="checkbox" id="checkbox-f1" checked>F1: Value3<br> 
    <input type="checkbox" id="checkbox-f1" checked>F1: Value4<br> 
    <input type="submit" id="submit-f1" value="Apply"> 
    </form> 
</div>   
<br> 
<div id="filter2"> 
    <form action='#'> 
    <input type="checkbox" id="select-all" checked>(All)<br> 
    <!-- Should select/unselect only the F2 checkboxes --> 
    <input type="checkbox" id="checkbox-f2" checked>F2: Value1<br> 
    <input type="checkbox" id="checkbox-f2" checked>F2: Value2<br> 
    <input type="checkbox" id="checkbox-f2" checked>F2: Value3<br> 
    <input type="checkbox" id="checkbox-f2" checked>F2: Value4<br> 
    <input type="submit" id="submit-f2" value="Apply"> 
    </form> 
</div>

JS:

$("#select-all").change(function() { 
    $(this).siblings().prop('checked', $(':checkbox').prop("checked")); 
});

Merci d'avance, Max

Source

2016-08-17 Max06270

Vous devez utiliser une classe pour 'select --all' au lieu d'une carte d'identité. Les ID sont censés être UNIQUE à un élément. Editer: Idem pour vos identifiants d'entrée; ceux qui devraient être des classes aussi. –

Vous ne devriez pas conserver le même identifiant. pour les deux (Toutes) cases à cocher. Changez l'identifiant en classe et utilisez le code ci-dessous.

$(".select-all").change(function() { 
    $(this).siblings().prop('checked', $(this).prop("checked")); 
});

Vous étiez toujours en train de vérifier l'accessoire pour la première case à cocher. En fait, vous devez vérifier la propriété de la case à cocher cliquée seulement.

Source

2016-08-18 00:22:31

Merci beaucoup. C'est la réponse parfaite – Max06270

attribut id Indique un identifiant unique pour un élément, vous devez donc utiliser la classe comme ceci:

<div id="filter1"> 
    <form action='#'> 
     <input type="checkbox" class="select-all" checked>(All)<br> 
     //.... 
    </form> 
</div>

<div id="filter2"> 
    <form action='#'> 
    <input type="checkbox" class="select-all" checked>(All)<br> 
    //... 
    </form> 
</div>

Et modifier le code jquery comme ceci:

$(document).ready(function() { 
    $("#filter2 .select-all, #filter1 .select-all").change(function() { 
     if($(this).is(':checked')) 
      $(this).siblings().prop('checked',true); 
     else 
      $(this).siblings().prop('checked',false); 
    }) 
})

OU changer comme ceci:

$(document).ready(function() { 
    $(".select-all").change(function() { 
     $(this).siblings().prop('checked', $(this).prop("checked")); 
    }) 
})

Code final:

<html> 
 
    <head> 
 
     <meta charset="utf-8"> 
 
    </head> 
 
    <body> 
 
<div id="filter1"> 
 
    <form action='#'> 
 
     <input type="checkbox" class="select-all" checked>(All)<br> 
 
     <!-- Should select/unselect only the F1 checkboxes --> 
 
     <input type="checkbox" id="checkbox-f1" checked>F1: Value1<br> 
 
     <input type="checkbox" id="checkbox-f1" checked>F1: Value2<br> 
 
     <input type="checkbox" id="checkbox-f1" checked>F1: Value3<br> 
 
     <input type="checkbox" id="checkbox-f1" checked>F1: Value4<br> 
 
     <input type="submit" id="submit-f1" value="Apply"> 
 
    </form> 
 
</div> 
 
<br> 
 
<div id="filter2"> 
 
    <form action='#'> 
 
    <input type="checkbox" class="select-all" checked>(All)<br> 
 
    <!-- Should select/unselect only the F2 checkboxes --> 
 
    <input type="checkbox" id="checkbox-f2" checked>F2: Value1<br> 
 
    <input type="checkbox" id="checkbox-f2" checked>F2: Value2<br> 
 
    <input type="checkbox" id="checkbox-f2" checked>F2: Value3<br> 
 
    <input type="checkbox" id="checkbox-f2" checked>F2: Value4<br> 
 
    <input type="submit" id="submit-f2" value="Apply"> 
 
    </form> 
 
</div> 
 
     <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script> 
 
     <script> 
 
$(document).ready(function() { 
 
    $("#filter1 .select-all, #filter2 .select-all").change(function() { 
 
     if($(this).is(':checked')) 
 
      $(this).siblings().prop('checked',true); 
 
     else 
 
      $(this).siblings().prop('checked',false); 
 
    }) 
 
    }) 
 
     </script> 
 
    </body> 
 
</html>

Source

2016-08-18 00:25:56 Ehsan

Merci pour votre aide, cette solution fonctionne. Cependant je vais utiliser à celui fourni par Vijendra Kulhade. – Max06270

vous êtes les bienvenus – Ehsan

Jquery Désélectionner tout Case à cocher Formulaires multiples

Répondre

Questions connexes