Javascript radio bouton désélectionner les autres lors de la sélection d'un bouton radio?

J'ai deux boutons radio pour sélectionner des voitures. Il y a seulement deux options: soit vous pouvez sélectionner une voiture BMW ou vous pouvez choisir une voiture Mercedes.

Voici mon code html pour ceci:

<label>Please specify car:</label>&nbsp; &nbsp;
<label>BMW</label>
<input type="radio" name="is_BMW" id="is_BMW" onchange="valueChanged()" />
&nbsp;&nbsp;
<label>Mercedes</label>
<input type="radio" name="is_Mercedes" id="is_Mercedes" onchange="valueChanged()" />

La fonction javascript pour cet événement valueChanged() et c'est assez simple:

<script>
    function valueChanged(){
        if(document.getElementById("is_BMW").checked == true)
        {
            document.getElementById("is_Mercedes").checked = false;
        }
        else
        {
            document.getElementById("is_BMW").checked = false;
        }
    }
</script>

Le problème que j'obtiens est ceci: à chaque fois que je clique sur la BMW bouton radio, elle est fixe et je ne peux pas changer de Mercedes.

Si je clique sur la Mercedes bouton radio d'abord, puis je suis capable de passer à BMW, mais encore une fois, une fois que je sélectionne BMW, je ne peux pas changer de Mercedes de plus et elle est fixe.

Il n'y a rien de mal avec mon code Javascript? Parce que mon Javascript connaissance me dit il n'y a rien de mal avec mon code Javascript. Est-ce autre chose? Dois-je utiliser jQuery pour résoudre ce problème?

Edit-1:
Je suis désolé, j'ai oublié de mentionner un point crucial - j'ai besoin de passer de la valeur onchange de bouton radio. Je suis surtout désolé pour la personne qui a répondu à ma question instantanément, je l'ai mentionné plus tôt, mon mauvais.

Donc, mon Javascript pourrait doit être quelque chose comme ceci:

<script>
        function valueChanged(){
            if(document.getElementById("is_BMW").checked == true)
            {
                document.getElementById("is_Mercedes").checked = false;
                document.getElementById("is_BMW").value = 1;
                document.getElementById("is_Mercedes").value = 0;
            }
            else
            {
                document.getElementById("is_BMW").checked = false;
                document.getElementById("is_BMW").value = 0;
                document.getElementById("is_Mercedes").value = 1;
            }
</script>

Pas besoin d'inclure la fonction javascript. Vous pouvez utiliser Mritunjay code
Ces étiquettes besoin de for attributs (ou dont ils ont besoin pour l'envelopper de ses entrées). Ils devraient également être sur le droit des entrées, pas de gauche. w3.org/TR/WCAG20-TECHS/H44.html
Merci pour ces.

OriginalL'auteur Choudhury Saadmaan Mahmid | 2015-01-01

html javascript

9

Je vais changer ma réponse en fonction de votre exigence.

Dans votre HTML donner le même nom à deux boutons radio. Cela va prendre soin de sélectionner et désélectionner des.
```
<label>Please specify car:</label>&nbsp; &nbsp;
<label>BMW</label>
<input type="radio" name="car" id="is_BMW" />
&nbsp;&nbsp;
<label>Mercedes</label>
<input type="radio" name="car" id="is_Mercedes" />
```
Et de mettre la modification de la valeur logique dans js comme ci-dessous
```
function valueChanged() {
    if (document.getElementById("is_BMW").checked == true) {
        document.getElementById("is_BMW").value = 1;
        document.getElementById("is_Mercedes").value = 0;
    } else {
        document.getElementById("is_BMW").value = 0;
        document.getElementById("is_Mercedes").value = 1;
    }
    console.log(document.getElementById("is_BMW").value);
    console.log(document.getElementById("is_Mercedes").value)
}
```
Explication:-

Le nom de paramètre indique à quel groupe de boutons radio le domaine appartient. Lorsque vous sélectionnez un bouton, tous les autres boutons dans le même groupe ne sont pas sélectionnées.

mise à jour de la démo

Que faire si j'ai besoin de passer de la valeur sur le changement? C'est en réalité une partie d'une application en PHP, et en fonction de la sélection de voiture, la valeur est envoyée à la base de données. Si BMW est sélectionné, la valeur est 1 pour is_bmw et 0 pour is_mercedes, et il est transmis à mon code PHP par $_POST et ensuite inséré dans la base de données. (is_bmw et is_mercedes 2 colonnes dans ma table de base de données). Vice-versa lors de la Mercedes est sélectionné.

OriginalL'auteur Mritunjay
5

Le bouton radio est à la différence d'une case à cocher, car un seul élément peut être sélectionné à la fois. Mais, pour que cela fonctionne, les boutons de la radio doit être "groupés" ensemble.

C'est fait en spécifiant input éléments avec le même name.

Dans votre exemple, cela peut être réalisé en modifiant la ligne suivante dans votre code HTML:
```
<input type="radio" name="car_type" id="BMW" />
<input type="radio" name="car_type" id="Mercedes" />
```
Pas de Javascript supplémentaire serait nécessaire pour obtenir le comportement souhaité.

Espère que cette aide offre des explications supplémentaires!

Edit:
Pas sûr de ce que vous essayez de faire, mais vous pouvez extraire la valeur par simple itération sur les éléments radio en Javascript:
```
var r = document.getElementsByName('car_type');
for (var i = 0, i < r.length; i++) {
    if (r[i].checked) {
        //insert code to use the checked value
        alert(r[i].value);
        break;
    }
}
```
Non je n'ai pas besoin d'extraire de la valeur. C'est tout simplement comme un interrupteur: si BMW est sélectionné, puis is_bmw = 1, et is_mercedes = 0. Vice versa, si Mercedes est sélectionné. is_bmw et is_mercedes deux colonnes dans ma table de base de données. Dans mon code PHP, à l'aide de $_POST je peux obtenir ces deux 1 et les valeurs à 0, puis exécuter une INSERT requête à transmettre ces valeurs à la base de données. Savvy?
D'accord je vois. Alors je pense que votre code Javascript dans votre post original fonctionne parfaitement bien. Je voudrais simplement supprimer les lignes document.getElementById("is_XXXX").checked = false; de l'intérieur des blocs de code, puisque c'était déjà pris en charge par le radio-élément du groupe. Ensuite, il devrait être bon.

OriginalL'auteur James Taylor

Vous devez vous connecter pour publier un commentaire.

Explication:-