Javascript Girl
  1. Javascript Girl
  3. Bootstrap 3 boutons radio ne retournant pas la valeur
Intereting Posts
Supprimer / tronquer les zéros avancés par javascript / jquery Rendre le HTML vers une image Ajout d'options à un choix et à la sélection d'un sur Internet Explorer Comment vérifier si un élément est vraiment visible avec JavaScript? JavaScript regex – l'argument null rend la correspondance regex Mongoexport utilisant des contraintes de $ gt et $ lt à une fourchette de dates Javascript: membres privés et propriétés en lecture seule Multiple $ http avec promesse en utilisant l'usine, angulaire Récupérer des valeurs à partir de la chaîne codée par json Comment arrêter le transfert de fichiers si le navigateur est fermé / téléchargé annulé Création d'un élément div dans un élément div en javascript Amélioration des performances de la détection des clics sur une grille isométrique de colonne décalée JQuery – équivalent à chacun (), mais pour un seul élément Trier le tableau par date donne des résultats inattendus TypeError: google.visualization.DataTable n'est pas un constructeur

Bootstrap 3 boutons radio ne retournant pas la valeur

Je suis en difficulté avec les boutons radio Twitter Bootstrap 3, je ne peux pas obtenir la valeur des éléments sélectionnés / sélectionnés. Je suis nouveau sur Jquery, mais j'ai rencontré de nombreux articles sur ce site pour gérer les boutons radio et aucun ne semble fonctionner avec Bootstrap.

HTML 

<form id="FormFilters" > // First Group of Radio <div id="Edu" class="btn-group" data-toggle="buttons"> <label class="btn btn-block btn-info-outline" >College <input id="Col" name="Edu" type="radio" value="Col" ></label> <label class="btn btn-block btn-info-outline" >High School <input id="Sch" name="Edu" type="radio" value="School" ></label> </div> // Second Group <div id="Experience" class="btn-group" data-toggle="buttons"> <label class="btn btn-block btn-info-outline" >Yes <input id="Yes" name="Exp" type="radio" value="Yes" ></label> <label class="btn btn-block btn-info-outline" > No <input id="No" name="Exp" type="radio" value="No" ></label> </div> </form> ect.../// up to 4 groups of radio btns

J'ai essayé :

onclick:Javascript:alert(this.value) même en cliquant sur n'importe quel élément ci-dessus ne renvoie rien

var x = $("#FormFilters input[type='radio']:checked").val(); alert(x); Ne renvoie rien

var x = $('input[type=radio]:checked', '#Edu').val(); alert(x);

Le style peut-il être le problème? Les balises ou les étiquettes <label> ?

Quelqu'un peut-il vous dire comment procéder correctement dans le formulaire vérifié des entrées / actifs et obtenir les valeurs? Merci

Oublions tous les cadres pour un instant et revenons au Javascript basique. Compte tenu de certains boutons radio, disons: 

 <input type="radio" name="color" value="red"/> Red <input type="radio" name="color" value="blue"/> Blue <input type="radio" name="color" value="green"/> Green <input type="radio" name="color" value ="white"/> White <br/> <input type="radio" name="shape" value="cirlce"/> Circle <input type="radio" name="shape" value="square"/> Square

Vous pouvez afficher la valeur des boutons radio cliqués à l'aide de vanilla Javascript en utilisant: 

 var radios = document.getElementsByTagName("input"); //attach a function for(var i = 0; i < radios.length; i++){ //only attach the function for type radio if(radios[i].type == "radio"){ radios[i].onclick = function(){ alert(getCheckedValues()); } } } function getCheckedValues(){ //muste be stored in an array var values = []; for(var x = 0; x < radios.length; x++){ if(radios[x].type == "radio" && radios[x].checked){ values.push(radios[x].value); } } return values; }

JS Fiddle: http://jsfiddle.net/LDEJ2/

Il existe des concepts très basiques au travail dans ce code. Le premier est de sélectionner les éléments du DOM , ce que j'ai fait en utilisant document.getElementsByTagName pour récupérer toutes les entrées. Le second concept est en boucle. Alors, maintenant que j'ai sélectionné toutes les entrées du DOM, j'ai besoin d'itérer sur chacune d'elles et de joindre un eventhandler d' eventhandler . Le gestionnaire d'événements est exécuté lorsqu'un événement est déclenché sur les éléments DOM spécifiques. Dans ce cas, lorsque l'événement de click est déclenché sur n'importe quel bouton radio, j'exécute une autre fonction.

Cette fonction boucle les boutons radio et enregistre la valeur de tous les boutons radio vérifiés dans un tableau, qui est ensuite alerté.

Essaye ça 

 $("input:radio").change(function(){ alert($(this).val()); });

Fiddle: http://jsfiddle.net/jPNTC/

Avez-vous essayé getElementById? C'est ce que j'utilise fir js parce que la plupart du temps je travaille avec php GET

Utilisez ceci: 

 $('input[name=Edu]:checked').val();

Ou plus précisément uniquement pour cette forme-id: 

 $('input[name=Edu]:checked', '#FormFilters').val();

J'ai ajouté un bouton à votre formulaire et créé une violon pour tester: http://jsfiddle.net/7Z6uZ/

Vous pouvez également récupérer toutes les cases sélectionnées à la fois : 

 $("input[type=radio]:checked").each(function() { console.log($(this).attr('name'), $(this).val()); // add $(this).val() with $(this).attr('name') to your array here });

Essayez-le ici: http://jsfiddle.net/7Z6uZ/1/

Peut-être qu'il y a un bug … voir ici: Bootstrap: la valeur du bouton radio n'est pas envoyée si elle est vérifiée deux fois

Il semble que l'état vérifié de l'élément de saisie ne soit pas modifié lors de l'utilisation de bootstrap 3. Cela fonctionne pour moi, en trouvant l'élément de input incorporé dans l'étiquette active.

$('label.active > input', '#Edu').val();