Background d'une cellule ou d'une div selon l'état d'un bouton radio

OTP

WRInaute accro
Bonjour,

Je souhaite, dans un form qui contient plusieurs boutons radios, que le fond (de div ou de cellule de tableau) change de couleur selon l'état du bouton radio (checked ou pas).

Est-ce possible ?

Si oui comment ?

Merci d'avance,

Michaël
 

OTP

WRInaute accro
Merci.
Et tu ferais comment pour changer la couleur en partant de ce code ? ;)
Moi je ne sais pas faire... :(
 

spout

WRInaute accro
@OTP: tu pourrais être plus précis ?
Une couleur différente pour chaque radio ? Le div / cellule contient les radio ? Etc...
 

OTP

WRInaute accro
Voici une des pages en question: -http://www.thewindpower.net/store_file_options_en.php?quote_order=1&id_zone=21

Si "Site license" est coché, je voudrais que la cellule qui contient "65 €" soit sur fond bleu.
Et si c'est "Global license", c'est le "130 €" qui passe sur fond bleu.

Idem ensuite encore les autres choix.
 

MikeR

WRInaute passionné
En reprenant et ajustant ton code. Ce n'est pas élégant, mais ça marche. :) testé sous IE, Chrome et FF.
Code:
<html>
<body>
 <script language="Javascript" type="text/javascript">

function change1()
{
isIE = (document.all)?true:false; //IE 6
isNN6 = (document.getElementById)?true:false;
 var s1;  
 var s2;  
if (isIE)  s1=document.all["licence_1"];
if (isNN6) s1=document.getElementById("license_1");
if (isIE)  s2=document.all["license_2"];
if (isNN6) s2=document.getElementById("license_2");
s2.checked= false;
s1.checked = true;
if (isIE)  d1=document.all["d1"];
if (isNN6) d1=document.getElementById("d1");
if (isIE)  d2=document.all["d2"];
if (isNN6) d2=document.getElementById("d2");
d1.style.backgroundColor="lightblue";
d2.style.backgroundColor="white";
}


function change2()
{
isIE = (document.all)?true:false; //IE 6
isNN6 = (document.getElementById)?true:false;
 var s1;  
 var s2;  
 var d1, d2;
if (isIE)  s1=document.all["licence_1"];
if (isNN6) s1=document.getElementById("license_1");
if (isIE)  s2=document.all["license_2"];
if (isNN6) s2=document.getElementById("license_2");
s2.checked= true;
s1.checked = false;
if (isIE)  d1=document.all["d1"];
if (isNN6) d1=document.getElementById("d1");
if (isIE)  d2=document.all["d2"];
if (isNN6) d2=document.getElementById("d2");
d1.style.backgroundColor="white";
d2.style.backgroundColor="lightblue";
}

</script>
<table cellspacing="0" style="width:100%;">
	<tr height="45">
		<td style="width:20%;" class="ligne_tableau1"><input type="radio" name="license_1" id="license_1" value="license_1_65" checked="checked" onclick="change1();"><b>Site license</b></td>
		<td style="width:65%;" class="ligne_tableau1">File can be shared by unlimited users within one corporate location (e.g. a regional office)</td>
		<td style="width:5%;" class="ligne_tableau1"></td>
		<td name="d1" id="d1"  style="width:10%;" class="ligne_tableau1">&nbsp;65 €</td>
	</tr>
	<tr class="puce_texte"><td style="width:100%;" colspan="4" class="ligne_tableau2"></td></tr>
	<tr height="45">
		<td class="ligne_tableau1"><input type="radio" name="license_2" id="license_2" value="license_2_130"  onclick="change2();"><b>Global license</b></td>
		<td class="ligne_tableau1">File can be shared globally by unlimited users within the purchasing corporation (e.g. all employees of a single company)</td>
		<td style="width:5%;" class="ligne_tableau1"></td>
		<td name="d2" id="d2" class="ligne_tableau1">&nbsp;130 ?</td>
	</tr>
</table>
</body>
</html>
 

spout

WRInaute accro
En supposant qu'il y aille jQuery (ce qui n'est pas le cas, flemme pour la méthode "parents" en vanilla):
PHP:
<span class="syntaxdefault"></span><span class="syntaxkeyword">$(</span><span class="syntaxstring">'input[name="license"]'</span><span class="syntaxkeyword">).</span><span class="syntaxdefault">on</span><span class="syntaxkeyword">(</span><span class="syntaxstring">'change'</span><span class="syntaxkeyword">,</span><span class="syntaxdefault"> function</span><span class="syntaxkeyword">()</span><span class="syntaxdefault"> </span><span class="syntaxkeyword">{<br /></span><span class="syntaxdefault">    var $tr </span><span class="syntaxkeyword">=</span><span class="syntaxdefault"> </span><span class="syntaxkeyword">$(</span><span class="syntaxdefault">this</span><span class="syntaxkeyword">).</span><span class="syntaxdefault">parents</span><span class="syntaxkeyword">(</span><span class="syntaxstring">'tr'</span><span class="syntaxkeyword">);<br /></span><span class="syntaxdefault">    $tr</span><span class="syntaxkeyword">.</span><span class="syntaxdefault">parents</span><span class="syntaxkeyword">(</span><span class="syntaxstring">'table'</span><span class="syntaxkeyword">).</span><span class="syntaxdefault">find</span><span class="syntaxkeyword">(</span><span class="syntaxstring">'td'</span><span class="syntaxkeyword">).</span><span class="syntaxdefault">css</span><span class="syntaxkeyword">(</span><span class="syntaxstring">'background'</span><span class="syntaxkeyword">,</span><span class="syntaxdefault"> </span><span class="syntaxstring">'#F2F3F3'</span><span class="syntaxkeyword">);<br /></span><span class="syntaxdefault">    $tr</span><span class="syntaxkeyword">.</span><span class="syntaxdefault">find</span><span class="syntaxkeyword">(</span><span class="syntaxstring">'td:last-child'</span><span class="syntaxkeyword">).</span><span class="syntaxdefault">css</span><span class="syntaxkeyword">(</span><span class="syntaxstring">'background'</span><span class="syntaxkeyword">,</span><span class="syntaxdefault"> </span><span class="syntaxstring">'blue'</span><span class="syntaxkeyword">);<br />});&nbsp;</span><span class="syntaxdefault"></span>
Et ce serait encore mieux avec une classe CSS:
PHP:
<span class="syntaxdefault">td</span><span class="syntaxkeyword">.</span><span class="syntaxdefault">ligne_tableau1</span><span class="syntaxkeyword">.</span><span class="syntaxdefault">active </span><span class="syntaxkeyword">{<br /></span><span class="syntaxdefault">    background</span><span class="syntaxkeyword">:</span><span class="syntaxdefault"> blue</span><span class="syntaxkeyword">;<br />}&nbsp;</span><span class="syntaxdefault"></span>

PHP:
<span class="syntaxdefault"></span><span class="syntaxkeyword">$(</span><span class="syntaxstring">'input[name="license"]'</span><span class="syntaxkeyword">).</span><span class="syntaxdefault">on</span><span class="syntaxkeyword">(</span><span class="syntaxstring">'change'</span><span class="syntaxkeyword">,</span><span class="syntaxdefault"> function</span><span class="syntaxkeyword">()</span><span class="syntaxdefault"> </span><span class="syntaxkeyword">{<br /></span><span class="syntaxdefault">    var $tr </span><span class="syntaxkeyword">=</span><span class="syntaxdefault"> </span><span class="syntaxkeyword">$(</span><span class="syntaxdefault">this</span><span class="syntaxkeyword">).</span><span class="syntaxdefault">parents</span><span class="syntaxkeyword">(</span><span class="syntaxstring">'tr'</span><span class="syntaxkeyword">);<br /></span><span class="syntaxdefault">    $tr</span><span class="syntaxkeyword">.</span><span class="syntaxdefault">parents</span><span class="syntaxkeyword">(</span><span class="syntaxstring">'table'</span><span class="syntaxkeyword">).</span><span class="syntaxdefault">find</span><span class="syntaxkeyword">(</span><span class="syntaxstring">'td'</span><span class="syntaxkeyword">).</span><span class="syntaxdefault">removeClass</span><span class="syntaxkeyword">(</span><span class="syntaxstring">'active'</span><span class="syntaxkeyword">);<br /></span><span class="syntaxdefault">    $tr</span><span class="syntaxkeyword">.</span><span class="syntaxdefault">find</span><span class="syntaxkeyword">(</span><span class="syntaxstring">'td:last-child'</span><span class="syntaxkeyword">).</span><span class="syntaxdefault">addClass</span><span class="syntaxkeyword">(</span><span class="syntaxstring">'active'</span><span class="syntaxkeyword">);<br />});&nbsp;</span><span class="syntaxdefault"></span>

Edit: grillé par MikeR :D
 

OTP

WRInaute accro
Bonjour,

J'ai implanté la solution de MikeR (je ne sais pas comment faire avec celle de spout :oops: , mais je pense que le souci sera le même).

En effet, la case change de couleur selon un onclick, et non selon le statut. Donc si j'arrive sur la page avec des cases précochées par un checked=checked, la case n'est pas sur fond de couleur. Il faut recliquer dessus pour avoir la couleur.

De plus, sauf erreur de ma part (très probable :wink: ), si je veux appliquer ça au tableau central, avec 4 états différents dans l'exemple, mais jusqu'à 21 dans certains cas, ça va faire une usine à gaz :!:

Il n'y a pas de solution différente ? Ou bien celle de spout le permet ?

Merci Messieurs,

Michaël
 

MikeR

WRInaute passionné
On peut paramétrer les fonctions pour qu'elles s'appliquent d'une façon générale sans avoir à faire une fonction spéciale pour chaque cas... Voir ci-dessous.
On peut même extraire le nom du type à remettre à zéro en extrayant le nom du paramètre "d" pour appeler clearAll avec le bon type...

Code:
<html>
<body>
 <script language="Javascript" type="text/javascript">

function clearAll(type)
{
var t;
var all = document.getElementsByTagName("input");
for (var i=0, max=all.length; i < max; i++) {
if (all[i].name.indexOf(type)>-1)
{
all[i].checked = false;
 //alert("found "+all[i].name); 
 t=document.getElementById(all[i].name+'_v');
t.style.backgroundColor="white";
}
}
}


function change(d)
{
clearAll("license");
isIE = (document.all)?true:false; //IE 6
isNN6 = (document.getElementById)?true:false;
var t;
if (isIE)  t=document.all[d+'_v'];
if (isNN6) t=document.getElementById(d+'_v');
t.style.backgroundColor="lightblue";

if (isIE)  t=document.all[d];
if (isNN6) t=document.getElementById(d);
t.checked=true;
}

</script>
<table cellspacing="0" style="width:100%;">
	<tr height="45">
		<td style="width:20%;" class="ligne_tableau1"><input type="radio" name="license_1" id="license_1" value="license_1_65" checked="checked" onclick="change('license_1');"><b>Site license</b></td>
		<td style="width:65%;" class="ligne_tableau1">File can be shared by unlimited users within one corporate location (e.g. a regional office)</td>
		<td style="width:5%;" class="ligne_tableau1"></td>
		<td name="license_1_v" id="license_1_v"  style="width:10%;" class="ligne_tableau1">&nbsp;65 €</td>
	</tr>
	<tr class="puce_texte"><td style="width:100%;" colspan="4" class="ligne_tableau2"></td></tr>
	<tr height="45">
		<td class="ligne_tableau1"><input type="radio" name="license_2" id="license_2" value="license_2_130"  onclick="change('license_2');"><b>Global license</b></td>
		<td class="ligne_tableau1">File can be shared globally by unlimited users within the purchasing corporation (e.g. all employees of a single company)</td>
		<td style="width:5%;" class="ligne_tableau1"></td>
		<td name="license_2_v" id="license_2_v" class="ligne_tableau1">&nbsp;130 ?</td>
	</tr>
</table>
</body>
</html>
 

MikeR

WRInaute passionné
J'ai eu pitié de toi, et j'ai fait la mise à jour pour rendre le type générique.
Comme ça, si tu donnes à un groupe de boutons <input> les id "type_1", "type_2", etc... et aux <td> des montants les id "type_1_v", etc.. et au onclick "type_1" (la même valeur que le id <input>), il suffit d'une seule fonction pour traiter tous les cas.

Code:
<<html>
<body>
 <script language="Javascript" type="text/javascript">

function clearAll(type)
{
var t;
var all = document.getElementsByTagName("input");
for (var i=0, max=all.length; i < max; i++) {
if (all[i].name.indexOf(type)>-1)
{
all[i].checked = false;
 //alert("found "+all[i].name); 
 t=document.getElementById(all[i].name+'_v');
t.style.backgroundColor="white";
}
}
}


function change(d)
{
var s = d.split("_");
//alert(s[0]);
clearAll(s[0]);
isIE = (document.all)?true:false; //IE 6
isNN6 = (document.getElementById)?true:false;
var t;
if (isIE)  t=document.all[d+'_v'];
if (isNN6) t=document.getElementById(d+'_v');
t.style.backgroundColor="lightblue";

if (isIE)  t=document.all[d];
if (isNN6) t=document.getElementById(d);
t.checked=true;
}

</script>
<table cellspacing="0" style="width:100%;">
	<tr height="45">
		<td style="width:20%;" class="ligne_tableau1"><input type="radio" name="license_1" id="license_1" value="license_1_65" checked="checked" onclick="change('license_1');"><b>Site license</b></td>
		<td style="width:65%;" class="ligne_tableau1">File can be shared by unlimited users within one corporate location (e.g. a regional office)</td>
		<td style="width:5%;" class="ligne_tableau1"></td>
		<td name="license_1_v" id="license_1_v"  style="width:10%;" class="ligne_tableau1">&nbsp;65 €</td>
	</tr>
	<tr class="puce_texte"><td style="width:100%;" colspan="4" class="ligne_tableau2"></td></tr>
	<tr height="45">
		<td class="ligne_tableau1"><input type="radio" name="license_2" id="license_2" value="license_2_130"  onclick="change('license_2');"><b>Global license</b></td>
		<td class="ligne_tableau1">File can be shared globally by unlimited users within the purchasing corporation (e.g. all employees of a single company)</td>
		<td style="width:5%;" class="ligne_tableau1"></td>
		<td name="license_2_v" id="license_2_v" class="ligne_tableau1">&nbsp;130 ?</td>
	</tr>
</table>
<br><br><br><br>
<table cellspacing="0" style="width:100%;">
	<tr height="45">
		<td style="width:20%;" class="ligne_tableau1"><input type="radio" name="maintenance_1" id="maintenance_1" value="maintenance_1_65" checked="checked" onclick="change('maintenance_1');"><b>Site maintenance</b></td>
		<td style="width:65%;" class="ligne_tableau1">File can be shared by unlimited users within one corporate location (e.g. a regional office)</td>
		<td style="width:5%;" class="ligne_tableau1"></td>
		<td name="maintenance_1_v" id="maintenance_1_v"  style="width:10%;" class="ligne_tableau1">&nbsp;65 €</td>
	</tr>
	<tr class="puce_texte"><td style="width:100%;" colspan="4" class="ligne_tableau2"></td></tr>
	<tr height="45">
		<td class="ligne_tableau1"><input type="radio" name="maintenance_2" id="maintenance_2" value="maintenance_2_130"  onclick="change('maintenance_2');"><b>Global maintenance</b></td>
		<td class="ligne_tableau1">File can be shared globally by unlimited users within the purchasing corporation (e.g. all employees of a single company)</td>
		<td style="width:5%;" class="ligne_tableau1"></td>
		<td name="maintenance_2_v" id="maintenance_2_v" class="ligne_tableau1">&nbsp;130 ?</td>
	</tr>
</table>

</body>
</html>
 

Discussions similaires

Haut