activer dynamiquement un radio en fonction du checkbox

**bullrot** · 04/11/2008, 11h08

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 :

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

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

**bullrot** · 04/11/2008, 13h09

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

Code :

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

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.

**bullrot** · 06/11/2008, 12h26

Re bonjour.

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

voici mon code :

Code :

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

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 :

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

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 :

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

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

**Jumano** · 06/11/2008, 13h09

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

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

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

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

**bullrot** · 06/11/2008, 13h41

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

**Jumano** · 06/11/2008, 13h52

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

**bullrot** · 06/11/2008, 14h19

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

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

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

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

**Jumano** · 06/11/2008, 14h28

Re,
Essaye de modifier comme ceci :

Code :

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

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

**bullrot** · 06/11/2008, 14h49

j'ai bien modifier comme ton code mais lorsque je clic sur un checkbox il ne se passe rien

**Jumano** · 06/11/2008, 15h03

Montre ton code complet ...

**bullrot** · 06/11/2008, 15h07

Code :

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

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 :

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

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 :

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

**Jumano** · 06/11/2008, 15h18

Autant pour moi j'avais oublié une simple quote

Code :

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

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

**bullrot** · 10/11/2008, 11h06

voila j'ai mis ce code et cela marche :

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

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

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

**bullrot** · 10/11/2008, 11h12

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

sinon je cherche toujours pour la 2eme question.

**Jumano** · 10/11/2008, 12h21

Bonjour,
Pour ta duxième question :

Code :

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

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 = "";;
        }

activer dynamiquement un radio en fonction du checkbox

JavaScript

Discussions similaires

Partager

Partager