J'ai des boutons radio avec le même nom et le même identifiant, qui sont des données dynamiques, je veux afficher ces valeurs de boutons radio en entrée, mais lorsque je coche le bouton radio, seule la première valeur du bouton radio s'affiche en entrée même si je coche sur la deuxième radio ou le troisième bouton radio.
J'ai trois types de radio d'entrée avec le même nom et le même identifiant mais avec des valeurs différentes, je vérifie le deuxième et le troisième bouton radio mais il n'affiche que la première valeur du bouton radio en entrée.
<!DOCTYPE html>
<html>
<body>
<input type="radio" name="colors" onclick="myFunction()" value="red" id="myRadio">Red color
<input type="radio" name="colors" onclick="myFunction()" value="blue" id="myRadio">Blue color
<input type="radio" name="colors" onclick="myFunction()" value="green" id="myRadio">Green color
<input type="text" id="demo">
<script>
function myFunction() {
var x = document.getElementById("myRadio").value;
document.getElementById("demo").value = x;
}
</script>
</body>
</html>
Quand je vérifie la couleur rouge, sa valeur doit apparaître sur le type d'entrée avec id demo et si je coche vert ou bleu alors il devrait afficher ces valeurs en entrée avec id demo.
6 Réponses :
Tout d'abord, vous ne devriez pas avoir 3 éléments avec le même identifiant. Deuxièmement, vous pouvez avoir le bouton radio coché avec jQuery. Voici votre code mis à jour:
<!DOCTYPE html> <html> <body> <input type="radio" name="colors" onclick="myFunction(event)" value="red" id="myRadio">Red color <input type="radio" name="colors" onclick="myFunction(event)" value="blue" id="myRadio">Blue color <input type="radio" name="colors" onclick="myFunction(event)" value="green" id="myRadio">Green color <input type="text" id="demo"> </body> </html>
function myFunction(event) {
var checked = null;
var elements = document.getElementsByTagName('input');
for(var i=0; elements[i]; ++i){
if(elements[i].checked){
checked = elements[i].value;
break;
}
}
document.getElementById("demo").value = checked;
}
Si vous voulez le faire sans jquery:
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <!DOCTYPE html> <html> <body> <input type="radio" name="colors" onclick="myFunction()" value="red" >Red color <input type="radio" name="colors" onclick="myFunction()" value="blue" >Blue color <input type="radio" name="colors" onclick="myFunction()" value="green" >Green color <input type="text" id="demo"> </body> </html>
function myFunction() {
document.getElementById("demo").value = $('input[name=colors]:checked').val();
}
Vous pouvez transmettre l'événement à la fonction myFunction et l'utiliser pour déterminer sur quel bouton radio a été cliqué, voici un exemple:
<!DOCTYPE html> <html> <body> <input type="radio" name="colors" onclick="myFunction(event)" value="red" id="myRadio">Red color <input type="radio" name="colors" onclick="myFunction(event)" value="blue" id="myRadio">Blue color <input type="radio" name="colors" onclick="myFunction(event)" value="green" id="myRadio">Green color <input type="text" id="demo"> </body> </html>
function myFunction(event) {
document.getElementById("demo").value = event.target.value;
}
<!DOCTYPE html>
<html>
<body>
<input type="radio" name="colors" onclick="myFunction(this.value)" value="red" id="myRadio">Red color
<input type="radio" name="colors" onclick="myFunction(this.value)" value="blue" id="myRadio">Blue color
<input type="radio" name="colors" onclick="myFunction(this.value)" value="green" id="myRadio">Green color
<input type="text" id="demo">
<script>
function myFunction(x) {
document.getElementById("demo").value = x;
}
</script>
</body>
</html>
À quoi sert var x = value; , vous pouvez simplement passer x comme paramètre!
@Mamun ok, j'ai minifié.
L'attribut id doit être unique dans un document. Vous pouvez utiliser la classe a > à la place parce que classe a > peut être utilisé pour identifier plus d'un élément. Remarque: Il n'est pas recommandé d'utiliser le gestionnaire d'événements en ligne. Vous pouvez utiliser Vous pouvez simplement utiliser this mot-clé pour faire référence au bouton radio actuel dans la fonction. p> Si vous ne souhaitez pas modifier le HTML, vous pouvez utiliser le sélecteur d'attribut avec Document .querySelectorAll () qui renvoie une NodeList statique (non active) représentant une liste des éléments du document qui correspondent au groupe de sélecteurs spécifié. Ensuite, vous pouvez implémenter forEach () pour parcourir tous les éléments pour attacher l'événement.
<input type="radio" name="colors" onclick="myFunction()" value="red" id="myRadio">Red color
<input type="radio" name="colors" onclick="myFunction()" value="blue" id="myRadio">Blue color
<input type="radio" name="colors" onclick="myFunction()" value="green" id="myRadio">Green color
<input type="text" id="demo">
const demo = document.getElementById('demo');
function myFunction() {
var x = document.querySelector('[name=colors]:checked').value;
demo.value = x;
}
Document.querySelector () en utilisant l'attribut name et vérifié de l'élément. document.querySelector('[name=colors]:checked').value
<input type="radio" name="colors" value="red" class="myRadio">Red color
<input type="radio" name="colors" value="blue" class="myRadio">Blue color
<input type="radio" name="colors" value="green" class="myRadio">Green color
<input type="text" id="demo">
const allRadios = document.querySelectorAll('.myRadio');
const demo = document.getElementById('demo');
allRadios.forEach(r => r.addEventListener('change', myFunction));
function myFunction() {
demo.value = this.value;
}
Vous ne pouvez pas avoir plus d'un élément avec le même identifiant depuis Les identifiants doivent être uniques . Vous devriez les remplacer par une classe, puis cibler le nom de la classe à la place.
De plus, évitez d'écrire votre JavaScript en ligne et utilisez plutôt des écouteurs d'événements comme ceci:
<!-- HTML --> <input type="radio" name="colors" value="red" class="myRadio">Red color <input type="radio" name="colors" value="blue" class="myRadio">Blue color <input type="radio" name="colors" value="green" class="myRadio">Green color <input type="text" id="demo">
/* JavaScript */
var radio = document.querySelectorAll(".myRadio");
var demo = document.getElementById("demo");
function checkBox(e){
demo.value = e.target.value;
}
radio.forEach(check => {
check.addEventListener("click", checkBox);
});
Ne jamais utiliser un ID plus d'une fois .ID signifie unique. Lorsque nous utilisons un groupe d'éléments, nous devons utiliser la classe ou tout autre attribut commun. J'utilise le nom du groupe radiobutton.
<label><input type="radio" name="colors" onclick="myFunction()" value="red">Red color</label> <label><input type="radio" name="colors" onclick="myFunction()" value="blue" >Blue color</label> <label><input type="radio" name="colors" onclick="myFunction()" value="green" >Green color</label> <p>Selected Color <input type="text" id="demo"></p>
function myFunction() {
var colorSelected = document.querySelector('input[name="colors"]:checked').value;
document.getElementById("demo").value = colorSelected;
}
Vous ne pouvez pas avoir plusieurs
idavec la même valeur en HTML.les données dynamiques arrivent via php
désolé je m'en souviendrai
presque tout le monde a résolu ma question si je marque la réponse, les autres peuvent se mettre en colère alors je le ferai plus tard