Cocher un checkbox dès qu'un bouton radio est coché

Version imprimable

Bonjour,

Je n'y connais vraiment rien en javascript, mais je pense que c'est ce qu'il faut utiliser pour mon souci.

Je souhaite que dès que l'on coche un bouton radio parmi une liste, l'élément case à cocher correspondant de la liste soit aussi coché, comme sur l'exemple ci-dessous:

http://img.imagesia.com/fichiers/fg/...fgpb_large.jpg

J'ai crée une fonction en javascript:
Code:

1 2 3 4 5 6 7 function BoutonCoché (identifiant) { boutonradio=document.getElementById(identifiant) boutoncheckbox=document.getElementById(identifiant) if (boutonradio.checked) boutoncheckbox.checked }
et voilà mon code dans le fichier html:
Code:

1 2 3 4 5 6 7 8 9 10 <FORM name="form" Method="POST" Action="toto.php"> <input type="radio" name="1" id="question1" onClick="BoutonCoché(question1)"/> <input type="checkbox" name="1" id="question1" />a </br> <input type="radio" name="1" id="question2" onClick="BoutonCoché(question2)"/> <input type="checkbox" name="1" id="question2" />b </br> <input type="radio" name="1" id="question3" onClick="BoutonCoché(question3)"/> <input type="checkbox" name="1" id="question3" />c </FORM>
Rien ne se passe.Une idée?

21/01/2014, 19h55
NoSmoking

Bonjour,

Citation:

Rien ne se passe.Une idée?

une ID doit être UNIQUE, qu'on ce le dise et se le répète...
21/01/2014, 20h03
fabulon46

Mouif...:cry:
Mais, comment keujefé?

taka ferkomca par exemple :aie:

Code:

1
2
3
4
5
6
7
8
9
10
<form name="form" method="POST" action="toto.php">
  <input type="radio" name="1" id="r_1" onclick="BoutonCoché(1)">
  <input type="checkbox" name="1" id="c_1">a
<br>
  <input type="radio" name="1" id="r_2" onclick="BoutonCoché(2)">
  <input type="checkbox" name="1" id="c_2">b
<br>
  <input type="radio" name="1" id="r_3" onclick="BoutonCoché(3)">
  <input type="checkbox" name="1" id="c_3">c
</form>

pour les names je te laisse faire suivant le besoin.

la fonction devenant simplement

Code:

1
2
3
4
5
function BoutonCoché( num){
    var btnradio = document.getElementById('r_' +num),
        btncheckbox = document.getElementById('c_' +num);
    btncheckbox.checked = btnradio.checked;
}

Il te serait profitable de t'habituer d'ores et déjà aux bonnes pratiques, déclaration des variables avec var mise en place des ; en fin d'instruction...

21/01/2014, 22h30
fabulon46

Niquel, c'est exactement ce qu'il me fallait.
J'ai pû l'adapter à mon code.

Merci!

Une autre solution sans avoir besoin d'identifiants :

Code:

1
2
3
4
5
6
7
8
9
10
<form name="form" method="POST" action="toto.php">
    <input type="radio" name="monradio" />
    <input type="checkbox"/>a
<br>
    <input type="radio" name="monradio" />
      <input type="checkbox"/>b
<br>
    <input type="radio" name="monradio" />
      <input type="checkbox"/>c
</form>

Code:

1
2
3
4
5
6
7
8
9
10
var radios = document.querySelectorAll('form input[type="radio"]');
var cocherBoiteSuivante = function (radio) { 
    radio.nextElementSibling.checked = radio.checked; 
};
var cocherBoites = function(){ 
    [].forEach.call(radios, cocherBoiteSuivante);
};
[].forEach.call(radios, function(radio){ 
    radio.addEventListener("click", cocherBoites);
});

J'ai utilisé deux boucles pour décocher les boîtes précédémment cochées, ce qui n'est pas géré dans les codes précédents.

22/01/2014, 06h44
fabulon46

Je vois le principe.
Par contre, pour mon projet, il ne faut pas que les autres boites soient décochées quand un radio est coché. Seulement que la boite correspondante soit elle aussi cochée.
Donc le précédent code me convient.

Merci à tous les 2.

Dans ce cas le code se réduit à:

Code:

1
2
3
4
5
6
7
var radios = document.querySelectorAll('form input[type="radio"]');
var cocherBoiteSuivante = function () { 
    this.nextElementSibling.checked = this.checked; 
};
[].forEach.call(radios, function(radio){ 
    radio.addEventListener("click", cocherBoiteSuivante);
});

Je viens de tester, mais ça ne marche pas.

Voilà le code que j'ai mis, à part, dans un fichier test.php

Code:

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
26
 
<script type="text/javascript">
var radios = document.querySelectorAll('form input[type="radio"]');
var cocherBoiteSuivante = function (radio) { 
    radio.nextElementSibling.checked = radio.checked; 
};
var cocherBoites = function(){ 
    [].forEach.call(radios, cocherBoiteSuivante);
};
[].forEach.call(radios, function(radio){ 
    radio.addEventListener("click", cocherBoites);
});
 
</script>
 
 
<form name="form" method="POST" action="toto.php">
    <input type="radio" name="monradio" />
    <input type="checkbox"/>a
<br>
    <input type="radio" name="monradio" />
      <input type="checkbox"/>b
<br>
    <input type="radio" name="monradio" />
      <input type="checkbox"/>c
</form>

23/01/2014, 00h29
SylvainPV

Pas loin :p Le script est à placer après le HTML, sinon les éléments ne sont pas encore dans le document au moment où on les cherche.
Au passage, pense à préciser le sélecteur avec un ID ou une class au cas où tu aurais d'autres boutons radio avec un comportement différent sur ta page.
23/01/2014, 17h18
fabulon46

Effectivement!

Va falloir que je m'y penche sur le javascript, pour dynamiser des pages, ça doit être pas mal!

Merci.