Discussion :

[fabulon46]

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:



J'ai crée une fonction en javascript:

Code :

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

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 html :

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

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?

[NoSmoking]

Bonjour,

Rien ne se passe.Une idée?

une ID doit être UNIQUE, qu'on ce le dise et se le répète...

[fabulon46]

Mouif...
Mais, comment keujefé?

[NoSmoking]

taka ferkomca par exemple

Code html :

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

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 :

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

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...

[fabulon46]

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

Merci!

[SylvainPV]

Une autre solution sans avoir besoin d'identifiants :

Code html :

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

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 js :

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

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.

[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.

[SylvainPV]

Dans ce cas le code se réduit à:

Code :

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

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);
});

[fabulon46]

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

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

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
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>

[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.

[fabulon46]

Effectivement!

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

Merci.