Cocher un radiobutton lors d'une sélection

**youness78** · 13/06/2014, 11h58

Bonjour,

Etant très débutant en javascript j'aurais vraiment besoin d'aide. J'ai une liste déroulante et je voudrais que lorsque l'utilisateur sélectionne un item de la liste ça coche un bouton radio à coté de la liste

Voila mon code

Code html :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
<div class="Choix">
    <input type="radio" value="1" name="ChoixExportationPDF" onselect="enabled"  />
    les <select id="NombrePagePDF" onchange="checked">
        <option value="5">5</option>
        <option value="10">10</option>
        <option value="15">15</option>
        <option value="20">20</option>
    </select> premières pages </div>

Merci de m'apporter une réponse claire et simple à comprendre s'il vous plait

Merci d'avance

**le_chomeur** · 13/06/2014, 12h11

voila

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
var listRadio = document.querySelectorAll('input[name=ChoixExportationPDF]');
 
var selectList = document.getElementById('NombrePagePDF');
selectList.onchange = function(){checkRadioByValue(this.value)};
function checkRadioByValue(value){
    var i,currentRadio;
    for(i=0;i < listRadio.length;i++){
        currentRadio = listRadio[i];
        if(currentRadio.value === value){
            currentRadio.checked = true;
        }
    }
}

Code html :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
<div class="Choix">
    <input type="radio" value="15" name="ChoixExportationPDF" onselect="enabled"  />
    les <select id="NombrePagePDF">
        <option value="5">5</option>
        <option value="10">10</option>
        <option value="15">15</option>
        <option value="20">20</option>
    </select> premières pages
</div>

et tu peux tester en ligne ici : http://jsfiddle.net/r8sfj/

Juste faire attention car querySelectorAll n'est pas compatible avec les anciennes version de ie

**iakou** · 13/06/2014, 16h24

En reprenant vos identifiants (attention j'ai rajouté un "id" pour le bouton radio, et une option "00" pour remise à zéro...)

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
<html><head> 
     <script type="text/javascript">
     function modification(objet)
          {
     indice = objet.selectedIndex ;
     button = document.getElementById("myRadioButton") ;
     button.value = objet.options[indice].value ;
     if ( button.value == "00" )
          button.checked = false;
     else
          button.checked = true;
     alert ("Le bouton-radio est mis à jour et contient : " + button.value) ;    
          }
     </script>
</head><body>
     <label style="font: 16px verdana;">Nombre de pages : </label>  
     <select onchange="modification(this)">
          <option value="00">00</option>
          <option value="05">05</option>
          <option value="10">10</option>
          <option value="15">15</option>
          <option value="20">20</option> 
     </select>
     <input type="radio" id="myRadioButton" name="ChoixExportationPDF" value=0 unchecked>
</body></html>

Vous pouvez le tester, cela fonctionne ! A vous d'adapter cela à vos besoins...

P.S : Particularité du "onchange" : Si vous sélectionnez "10" cela met à jour, si vous resélectionnez "10", il ne se passera rien car "onchange" ne sera pas activé (la même option venant d'être sélectionnée).

**Bovino** · 13/06/2014, 16h48

Attention toutefois à fournir des codes corrects.
* Il manque un doctype.
* Il manque la balise <title> obligatoire.
* Il est recommandé d'utiliser le mot clé var pour déclarer ses variables.
* objet.options[indice].value est une syntaxe qui date des IE4 et Netscape 4, de nos jours, objet.value est largement suffisant pour récupérer la valeur d'un select.
*

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
if ( button.value == "00" )
    button.checked = false;
else
    button.checked = true;

puet se simplifier en button.checked = button.value != "00";.

**iakou** · 13/06/2014, 18h12

Bonsoir Bovino !
Vous savez fort bien, qu'il s'agit d'un simple exemple, celui-ci offrant l'avantage d'être testé et adapté très rapidement.
Je pense que Younes saura faire la part des choses...

**le_chomeur** · 16/06/2014, 11h46

le problème de ton code iakou c'est que la correspondance ne se fait qu'avec un seul radio ciblé par son id, si plusieurs boutons radios ( sinon une checkbox aurait été plus appropriée ) sont a checké ton code deviendra vite compliquer à gérer

**iakou** · 16/06/2014, 15h03

Je viens de relire ce que Younes avait demandé :
Or, il ne parle que d'un seul "select" et d'un seul "radio button".
Par ailleurs il voulait quelquechose de simple !...

**Watilin** · 16/06/2014, 15h20

Envoyé par le_chomeur

( sinon une checkbox aurait été plus appropriée )

C'est le premier truc que j'ai eu envie de dire en lisant la question.

Il y a un truc qui me dérange et dont personne n'a parlé :

Code html :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
<input type="radio" ... onselect="enabled"  />
...
<select ... onchange="checked">

Ça ne marche pas ça ! Puisque des solutions ont été données, il vaut mieux retirer ces attributs onselect et onchange défectueux.

Iakou attention

l'attribut unchecked n'existe pas.

**iakou** · 16/06/2014, 18h05

Yesss !..

Vous avez raison, l'attribut "unchecked" n'existe pas !... Hélas je ne peux plus corriger !...

Toutefois, même si cette erreur était réitérée, elle n'aurait aucune incidence : L'attribut n'existant pas, il sera purement et simplement ignoré.

Voici ce que préconise le W3C :

The checked attribute is a boolean attribute.
When present, it specifies that an <input> element should be pre-selected (checked) when the page loads.
The checked attribute can be used with <input type="checkbox"> and <input type="radio">.
The checked attribute can also be set after the page load, with a JavaScript.

Cordialement

**ascito** · 19/06/2014, 05h33

alors, j'avou, je n'ai pas tout à fait compris l'énoncé à la première lecture ( et comme je ne suis pas quelqu'un qui pose des énoncés faciles, je me tiens à ce que je peu comprendre) ;

j'ai compris qu'il faut que en changeant l’état d'une liste, cela change l’état d'autre élément de formulaire (hors dans l'énoncé de la question, tout repose sur le fait que le changement d’état du select ne puisse pas changer l’état des autres éléments du formulaire) ; donc prenant en compte que la question est tel quelle, et avec vos réponses, je déduit ceci :

1 ) nous disposons d'une liste
2 ) nous disposons d'un autre élément de formulaire ( ou autre ) devant changer d’état selon le choix du select

choisir comme élément un "radio", pour passer un filtre de data d'une action user vers une autre ne parait pas forcément la meilleur solution, c'est un avis perso

par contre, et si j'ai bien compris l'objectif, il faut pouvoir sur le choix d'un select, motiver une autre zone

A ce moment précis, il serait plus subtil de créer des "écouteurs", des "triggers", où le "radio" ne subit pas l'action du select, mais ou il "écoute le changement du select" en vue de se mettre à jour;

dans ce cas, il y à de forte chances que tu puisses trouver de "jolies" solutions

Cocher un radiobutton lors d'une sélection

JavaScript

Discussions similaires

Partager

Partager