activer dynamiquement un radio en fonction du checkbox

Version imprimable

Bonjour à tous.

voila j'ai une liste qui se crée dynamiquement.

Pour chaque ligne de ma liste j'ai ceci:

checkbox - bouton radio Yes/No - Name - Date

voici mon code :
Code:

1 2 3 4 5 6 7 8 $checked_checkbox = isset($_POST['tab'][$numero]['0']) ? 'checked' : ''; $checked_radio_yes = (isset($_POST['tab'][$numero]['1']) && $_POST['tab'][$numero]['1'] == '1') ? 'checked' : ''; $checked_radio_non = (isset($_POST['tab'][$numero]['1']) && $_POST['tab'][$numero]['1'] == '0') ? 'checked' : ''; echo '<tr>'; echo '<td class="col1"><input type="checkbox" name="tab['.$numero.'][0]" value="'.$id.'" '.$checked_checkbox.''; echo'></td>'; echo '<td class="col2"><input class="radio" type="radio" name="tab['.$numero.'][1]" value="1" '.$checked_radio_yes.'><label class="green">Yes</label> <input class="radio" type="radio" name="tab['.$numero.'][1]" value="0" '.$checked_radio_non.'><label class="red">No</label>';
je voudrais en faite que mes boutons radio s'active uniquement que si mon checkbox de la ligne soit cochée.

je suis nul en javascript et je n'ai pas trouver mon bonheur en fouillant le web. J'ai trouver des exemples mais pas en dynamique...

Merci de votre aide

voici le code généré au cas ou...

Code:

1
2
3
4
5
6
7
8
9
10
11
<table id="separation">
                    <tr>
                        <td class="col1"><label class="text8">Interest</label></td>
                        <td class="col2"><label class="text8">Send</label></td>
                        <td class="col3"><label class="text8">Name</label></td>
                          <td class="col4"><label class="text8">Publication date</label></td>
                     </tr>
                    <tr><td class="col1"><input type="checkbox" name="tab[1][0]" value="3" ></td><td class="col2"><input class="radio" type="radio" name="tab[1][1]" value="1" ><label class="green">Yes</label>
                                               <input class="radio" type="radio" name="tab[1][1]" value="0" ><label class="red">No</label><td class="col3">10 steps to Green IT</td><td class="col4"> 2008-10-16</td>
                         </tr><tr><td class="col1"><input type="checkbox" name="tab[2][0]" value="7" ></td><td class="col2"><input class="radio" type="radio" name="tab[2][1]" value="1" ><label class="green">Yes</label>
                                               <input class="radio" type="radio" name="tab[2][1]" value="0" ><label class="red">No</label><td class="col3">European Energy Markets Observatory</td><td class="col4"> 2007-11-12</td>

Donc je voudrais que quand je coche ma checkbox de la ligne 1 par exemple les 2 radio de la ligne 1 s'active.

Re bonjour.

alors j'ai chercher et j'en suis arrivé a ce stade :

voici mon code :

Code:

1
2
3
<td class="col1"><input type="checkbox" name="tab'.$numero.'[cb]" value="'.$id.'"></td>'; 
<td class="col2"><input class="radio" type="radio" name="tab'.$numero.'[ra]" value="1"><label class="green">Yes</label>
                          <input class="radio" type="radio" name="tab'.$numero.'[ra]" value="0" ><label class="red">No</label>

le code qui est généré :

Code:

1
2
3
4
5
6
<tr><td class="col1"><input type="checkbox" id="chkbox1" onClick="griser() name="tab1[cb]" value="3"  ></td><td class="col2"><input class="radio" type="radio" id="chkrad1" name="tab1[ra]" value="1" ><label class="green">Yes</label>
                                               <input class="radio" type="radio" id="chkrad1" name="tab1[ra]" value="0" ><label class="red">No</label><td class="col3">10 steps to Green IT</td><td class="col4"> 2008-10-16</td>
                         </tr><tr><td class="col1"><input type="checkbox" id="chkbox2" onClick="griser() name="tab2[cb]" value="7"  ></td><td class="col2"><input class="radio" type="radio" id="chkrad2" name="tab2[ra]" value="1" ><label class="green">Yes</label>
                                               <input class="radio" type="radio" id="chkrad2" name="tab2[ra]" value="0" ><label class="red">No</label><td class="col3">European Energy Markets Observatory</td><td class="col4"> 2007-11-12</td>
                         </tr><tr><td class="col1"><input type="checkbox" id="chkbox3" onClick="griser() name="tab3[cb]" value="17"  ></td><td class="col2"><input class="radio" type="radio" id="chkrad3" name="tab3[ra]" value="1" ><label class="green">Yes</label>
                                               <input class="radio" type="radio" id="chkrad3" name="tab3[ra]" value="0" ><label class="red">No</label><td class="col3">Global CIO Survey 2008</td><td class="col4"> 2008-03-11</td>

la fonction griser() :

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
<script>
    function griser()
    {
        if (document.forms["addcontacts"].nomducheckbox.checked)
        {
        document.getElementById('idduradio').disabled="true" ;
        }
        else
        {
        document.getElementById('idduradio').disabled="false" ;
        }
    }
    </script>

je pense que mon code est bon mais je n'arrive pas a récupérer le nomducheckbox et idduradio. ( je debute en javascript donc je ne connais pas toutes les syntaxes )

Je rappelle : je voudrais, pour chaque ligne ,en cliquant sur ma checkbox , griser les 2 boutons radio

Merci

Bonjour,
Il faut passer les paramètres lorsque tu appelles la fonction griser() :
Tu modifies ton script comme ceci :

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
<script>
    function griser(addcontacts,idduradio)
    {
        if (document.getElementById(addcontacts).checked == true)
        {
		document.getElementById(idduradio+"1").disabled = "disabled" ;
		document.getElementById(idduradio+"2").disabled = "disabled" ;
        }
        if (document.getElementById(addcontacts).checked == false)
        {
		document.getElementById(idduradio+"1").disabled = "";
		document.getElementById(idduradio+"2").disabled = "";
        }
    }
</script>

Ensuite sur le onclick tu ajoute les paramètres suivants :

Code:

1
2
3
<input type="checkbox" id="chkbox1" onClick="griser('chkbox1','chkrad');" name="tab1[cb]" value="3">
<input class="radio" type="radio" id="chkrad1" name="tab1[ra]" value="1" ><label class="green">Yes</label>
<input class="radio" type="radio" id="chkrad2" name="tab1[ra]" value="0" ><label class="red">No</label>

Par contre fait attention de n'avoir que des ID uniques ...

06/11/2008, 13h41
bullrot

Merci mais ton code marche pour du statique.

Hors ici je suis en dynamique. j'avais mis 2 exemples de code générer mais je peux en avoir 20... 100...

donc il me faudrait quil prenne en compte ma variable dynamique
06/11/2008, 13h52
Jumano

Re,
A toi de modifier les paramètres que je t'ai indiqué avec les variables PHP ... dans le onclick ...

j'ai décomposé un peu le script et pour l'instant la premiere phase ne marche pas je ne comprends pas pourquoi.

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
<script>
    function griser(checkbox,idduradio)
    {
        if (document.getElementById(checkbox).checked == true)
        {
		//document.getElementById(idduradio+"1").disabled = "disabled" ;
		//document.getElementById(idduradio+"2").disabled = "disabled" ;   
		alert('checked');
 
        }
        if (document.getElementById(checkbox).checked == false)
        {
		//document.getElementById(idduradio+"1").disabled = "";
		//document.getElementById(idduradio+"2").disabled = "";
		alert('non checked');
        }
    }
</script>

Code:

1
2
3
echo '<td class="col1"><input type="checkbox" id="chkbox'.$numero.'" onClick="griser(chkbox'.$numero.',chkrad'.$numero.');" name="tab'.$numero.'[cb]" value="'.$id.'" '.$checked_checkbox.' '; echo'></td>';  
          				echo '<td class="col2"><input class="radio" type="radio" id="chkrad'.$numero.'" name="tab'.$numero.'[ra]" value="1" '.$checked_radio_yes.'><label class="green">Yes</label>
											   <input class="radio" type="radio" id="chkrad'.$numero.'" name="tab'.$numero.'[ra]" value="0" '.$checked_radio_non.'><label class="red">No</label>';

il me marque une erreur de script lorsque je clic sur un checkbox...:oops:

Re,
Essaye de modifier comme ceci :

Code:

1
2
3
4
5
<?php
echo '<td class="col1"><input type="checkbox" id="chkbox'.$numero.'" onClick="griser(\'chkbox'.$numero.',\''.$numero.'\');" name="tab'.$numero.'[cb]" value="'.$id.'" '.$checked_checkbox.' '; echo'></td>';  
                                        echo '<td class="col2"><input class="radio" type="radio" id="'.$numero.'1" name="tab'.$numero.'[ra]" value="1" '.$checked_radio_yes.'><label class="green">Yes</label>
                                                                                           <input class="radio" type="radio" id="'.$numero.'2" name="tab'.$numero.'[ra]" value="0" '.$checked_radio_non.'><label class="red">No</label>';
?>

Attention à bien mettre des ID uniques ...

06/11/2008, 14h49
bullrot

j'ai bien modifier comme ton code mais lorsque je clic sur un checkbox il ne se passe rien :roll:
06/11/2008, 15h03
Jumano

Montre ton code complet ...

Code:

1
2
3
echo '<td class="col1"><input type="checkbox" id="chkbox'.$numero.'" onClick="griser(\'chkbox'.$numero.',\''.$numero.'\');" name="tab'.$numero.'[cb]" value="'.$id.'" '.$checked_checkbox.' '; echo'></td>';  
          				echo '<td class="col2"><input class="radio" type="radio" id="'.$numero.'1" name="tab'.$numero.'[ra]" value="1" '.$checked_radio_yes.'><label class="green">Yes</label>
											   <input class="radio" type="radio" id="'.$numero.'2" name="tab'.$numero.'[ra]" value="0" '.$checked_radio_non.'><label class="red">No</label>';

cela génére :

Code:

1
2
3
4
<tr><td class="col1"><input type="checkbox" id="chkbox1" onClick="griser('chkbox1,'1');" name="tab1[cb]" value="3"  ></td><td class="col2"><input class="radio" type="radio" id="11" name="tab1[ra]" value="1" ><label class="green">Yes</label>
											   <input class="radio" type="radio" id="12" name="tab1[ra]" value="0" ><label class="red">No</label><td class="col3">10 steps to Green IT</td><td class="col4"> 2008-10-16</td>
        	 			</tr><tr><td class="col1"><input type="checkbox" id="chkbox2" onClick="griser('chkbox2,'2');" name="tab2[cb]" value="7"  ></td><td class="col2"><input class="radio" type="radio" id="21" name="tab2[ra]" value="1" ><label class="green">Yes</label>
											   <input class="radio" type="radio" id="22" name="tab2[ra]" value="0" ><label class="red">No</label><td class="col3">European Energy Markets Observatory</td><td class="col4"> 2007-11-12</td>

ma fonction :

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
<script>
    function griser(checkbox,idduradio)
    {
        if (document.getElementById(checkbox).checked == true)
        {
		//document.getElementById(idduradio+"1").disabled = "disabled" ;
		//document.getElementById(idduradio+"2").disabled = "disabled" ;   
		alert('checked');
 
        }
        if (document.getElementById(checkbox).checked == false)
        {
		//document.getElementById(idduradio+"1").disabled = "";
		//document.getElementById(idduradio+"2").disabled = "";
		alert('non checked');
        }
    }
</script>

06/11/2008, 15h18
Jumano

Autant pour moi j'avais oublié une simple quote :oops:

Code:

onClick="griser(\'chkbox'.$numero.'\',\''.$numero.'\');"

voila j'ai mis ce code et cela marche :

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
<script>
    function griser(checkbox,idduradio)
    {
        if (document.getElementById(checkbox).checked == true)
        {
		document.getElementById(idduradio+"1").disabled = "";
		document.getElementById(idduradio+"2").disabled = "";   
 
 
        }
        if (document.getElementById(checkbox).checked == false)
        {
		document.getElementById(idduradio+"1").disabled = "disabled";
		document.getElementById(idduradio+"2").disabled = "disabled";
 
        }
    }														 
</script>

Code:

1
2
3
echo '<td class="col1"><input type="checkbox" id="chkbox'.$numero.'" onClick="griser(\'chkbox'.$numero.'\',\''.$numero.'\');" name="tab'.$numero.'[cb]" value="'.$id.'" '.$checked_checkbox.' '; echo'></td>';  
          				echo '<td class="col2"><input class="radio" type="radio" id="'.$numero.'1" name="tab'.$numero.'[ra]" value="1" '.$checked_radio_yes.'><label class="green">Yes</label>
											   <input class="radio" type="radio" id="'.$numero.'2" name="tab'.$numero.'[ra]" value="0" '.$checked_radio_non.'><label class="red">No</label>';

par contre encore 2 petite question :

lorsque je charge ma page il ne sont pas disabled par contre mon checkbox n'est pas coché. comment faire pour que au lancement de la page ( 1er fois ) les radio soit disabled ?

Aussi deuxième question, donc si je coche un checkbox, mes radio s'activent, je choisi Yes par exemple et ensuite je decoche mon checkbox, le choix yes reste quand même, es-ce possible d'avoir comme au chargement les 2 radio non coché ?

merci

10/11/2008, 11h12
bullrot

j'ai trouver pour les rendre disabled directement il suffit de le coder en html directement .

sinon je cherche toujours pour la 2eme question.

Bonjour,
Pour ta duxième question :

Code:

1
2
3
4
5
6
7
if (document.getElementById(checkbox).checked == false)
        {
		document.getElementById(idduradio+"1").disabled = "disabled";
		document.getElementById(idduradio+"2").disabled = "disabled";
		document.getElementById(idduradio+"1").checked = "";
		document.getElementById(idduradio+"2").checked = "";;
        }