Javascript Girl
  1. Javascript Girl
  3. Afficher et cacher div en fonction de la sélection de la case à cocher en utilisant javascript
Intereting Posts
Comment envelopper le datatimepicker js dans la directive AngularJS Erreur "Impossible de charger la ressource locale: fichier: // chemin partagé" Rails 4: comment utiliser $ (document) .ready () avec des turbo-liens Type d'entrée = fichier multiple, supprimer des éléments ActiveXObject dans IE8 Arrêter Entrée / Retourner la clé en soumettant un formulaire La fonction s'applique avec les arguments en utilisant une tranche Comment détecter le contenu mixte avec angularjs? Sélection de table Javascript Comment déterminer si l'objet JavaScript natif possède une propriété / une méthode? Utilisation de l'API Graphique Facebook pour obtenir une liste des amis d'un utilisateur Comment désactiver les emplacements sur google map V3? La meilleure façon d'ajouter des éléments DOM avec jQuery Ajouter l'élément json dans ANGULAR avec pop-up Comment détecter les erreurs sur la page 404 en utilisant JavaScript?

Afficher et cacher div en fonction de la sélection de la case à cocher en utilisant javascript

Bonjour, j'ai besoin de cacher et d'afficher la division en fonction de la sélection de la case à cocher. Actuellement, je dois montrer et cacher 10 division et 10 cases sont fournies pour cela. Aussi, il devrait y avoir sur la case à cocher selet tout ce qui vérifiera toute la case à cocher et tous les 10 div devraient être affichés. Une fois que l'utilisateur clique sur, sélectionnez tout ce qu'il doit maintenant changer pour désélectionner tout pour désélectionner tout. Une fois que vous sélectionnez tout, cliquez dessus il désélectionnera toutes les cases et aucune division ne doit être affichée. Veuillez me fournir une solution javascript pas jquery. Voici le code 

<html> <head> <script type="text/javascript"> var checkflag = "false"; function check(field) { if (checkflag == "false") { for (i = 0; i < field.length; i++) { field[i].checked = true; } checkflag = "true"; return "Uncheck All"; } else { for (i = 0; i < field.length; i++) { field[i].checked = false; } checkflag = "false"; return "Check All"; } } function ShowHideDiv(chkPassport) { var dvPassport = document.getElementById("dvPassport"); dvPassport.style.display = chkPassport.checked ? "block" : "none"; } </script> </head> <body> <form name=myform action="" method=post> <table> <tr> <td><strong>Make a selection</strong><br> <input type=checkbox name=list id="chkPassport" onclick="ShowHideDiv(this)" value="1">Java<br> <input type=checkbox name=list value="2">JavaScript<br> <input type=checkbox name=list value="3">ASP<br> <input type=checkbox name=list value="4">HTML<br> <input type=checkbox name=list value="5">SQL<br> <br> <input type=button value="Check All" onClick="this.value=check(this.form.list)"></td> </tr> </table> <div id="dvPassport" style="display: none"> Passport Number: <input type="text" id="txtPassportNumber" /> </div> </form> </body> </html>

Vous pouvez le faire par le code jQuery suivant: 

  $('.checkbox').click(function() { if( $(this).is(':checked')) { $("#yourdiv").show(); } else { $("#yourdiv").hide(); } });

Modifiez #yourdiv – et .checkbox sur vos identifiants CSS.