Dev Faq
0
votes

Comment écrire une méthode générique dans jQuery

J'ai un scénario comme plusieurs sections ont une fonctionnalité similaire définie ci-après 

<html lang="en"> <head>
        <title>Test</title>
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>

        <script type="text/javascript">
        $(function(){
            $("#fav_countries_checkboxAll_option").click(function(){  
                $(".fav-color").prop('checked', 'checked');
            });
                    $("#fav_sports_checkboxAll_option").click(function(){  
                $(".fav-sport").prop('checked', 'checked');
            });

        });
        </script> </head> <body>   <h3>Favorite Countries</h3>   <a id="fav_countries_checkboxAll_option"
    href="javascript:void(0);">Select all</a>   <input type="checkbox"
    class="fav-color" name="country1" value="India">India<br/>   <input
    type="checkbox" class="fav-color" name="country2"
    value="Singapore">Singapore<br/>   <input type="checkbox"
    class="fav-color" name="country3" value="Australia">Australia<br/>  
    <input type="checkbox" class="fav-color" name="country4"
    value="Ameria">Ameria<br/>   <br/>
         <h3>Favorite Sports</h3>   <a id="fav_sports_checkboxAll_option" href="javascript:void(0);">Select
    all</a>   <input type="checkbox" class="fav-sport" name="sport1"
    value="Cricket">Cricket<br/>   <input type="checkbox"
    class="fav-sport" name="sport2" value="Tennis">Tennis<br/>   <input
    type="checkbox" class="fav-sport" name="sport3"
    value="VolleyBall">VolleyBall<br/>    </body> </html>

0 commentaires

3 Réponses :

2
votes

Vous pouvez y parvenir en utilisant un sélecteur de classe comme ci-dessous 

 $(".checkAll").click(function(){  
          var relatedCtrls = $(this).attr('related-ctrls')
          if(relatedCtrls)
            $('.'+relatedCtrls).prop('checked', 'checked');
       });

<a id="fav_countries_checkboxAll_option"
    href="javascript:void(0);" class="checkAll" related-ctrls="fav-color">Select all</a> 


<a id="fav_countries_checkboxAll_option"
        href="javascript:void(0);" class="checkAll" related-ctrls="fav-sport">Select all</a>

0 commentaires
0
votes

Vous pouvez le faire même sans classes ou identifiants en utilisant NextUntUntil () code> et filtre () code>:

p> 

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<h3>Favorite Countries</h3>
<a id="fav_countries_checkboxAll_option" href="javascript:void(0);">Select all</a> <input type="checkbox" class="fav-color" name="country1" value="India">India<br/> <input type="checkbox" class="fav-color" name="country2" value="Singapore">Singapore<br/> <input type="checkbox" class="fav-color" name="country3" value="Australia">Australia<br/> <input type="checkbox" class="fav-color" name="country4" value="Ameria">Ameria<br/> <br/>
<h3>Favorite Sports</h3> 
<a id="fav_sports_checkboxAll_option" href="javascript:void(0);">Select all</a> <input type="checkbox" class="fav-sport" name="sport1" value="Cricket">Cricket<br/> <input type="checkbox" class="fav-sport" name="sport2" value="Tennis">Tennis<br/> <input type="checkbox" class="fav-sport" name="sport3" value="VolleyBall">VolleyBall

0 commentaires
0
votes

Évidemment, il existe de nombreuses façons d'atteindre vos besoins.

  • Veuillez envisager de nommer votre case à cocher avec le même nom code> lors du regroupement. Ce n'est pas obligatoire mais lorsque vous essayez d'obtenir une liste de toutes les cases cochées Sous certaines catégories, cela devient utile. Dans ton cas Favorise et favorisportsport. P> li>

  • Nous utilisons la classe code> pour identifier notre élément d'action A code> élément et joindre Cliquez sur CODE> Fonction P> LI>

  • Nous utilisons HTML5 Attribut code> pour stocker le nom code> de la catégorie Cochez la case pour effectuer Selectall sur. Dans ce scénario data-toselect = 'cofre_country' code>, data-toselect = "préféré_sport ' code> p> l> li>

  • Passez le nom code> Nous obtenons de l'attribut Data DATA-TOSELECTE CODE> à la fonction Prop code> fonction et mettez à jour la valeur sur vérifié code> p> li> ul>

    p> 

    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<body>
  <h3>Favorite Countries</h3>
  <a id="fav_countries_checkboxAll_option" class="select-all-link" data-toselect="favorite_country" href="javascript:;">Select all</a>
  <legend>Favorite Countries?</legend>
  <input type="checkbox" name="favorite_country" value="India">India<br>
  <input type="checkbox" name="favorite_country" value="Singapore">Singapore<br>
  <input type="checkbox" name="favorite_country" value="Australia">Australia<br>
  <input type="checkbox" name="favorite_country" value="Ameria">Ameria<br>


  <a id="fav_sports_checkboxAll_option" class="select-all-link" data-toselect="favorite_sport" href="javascript:;">Select all</a>
  <legend>Favorite Countries?</legend>

  <input type="checkbox" name="favorite_sport" value="Cricket">Cricket<br>
  <input type="checkbox" name="favorite_sport" value="VolleyBall">VolleyBall<br>
  <input type="checkbox" name="favorite_sport" value="Tennis">Tennis<br>

</body>

3 commentaires

Merci ça marche .. y a-t-il un moyen d'aller chercher le nom de la case à cocher dans l'événement Onchange

@arjunan, événement ONCHANGE de quoi? la case à cocher? Je dirais que ce serait une question différente, mais ce sera le long des lignes OIF $ ('TYPE = Cochez la case]'). ON ("Modifier", fonction () {console.log ($ (ceci ) .attr ('nom'));}) appliqué sur toutes les cases à cocher sur la page

Merci beaucoup pour votre aide. J'ai pu trouver une solution pour mon dernier commentaire.

Articles qui pourrait vous intéresser :

Select2 ne s'affiche pas correctement dans le mode bootstrap
datetimepicker ne fonctionne pas avec bootstrap 4?
L'appel Ajax n'affiche pas de réponse en cas de succès
django admin - Comment ajouter du javascript à la fin d'un fichier