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

  • Auteur de la discussion Auteur de la discussion OTP
  • Date de début Date de début
OTP
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
OTP
WRInaute accro
Merci.
Et tu ferais comment pour changer la couleur en partant de ce code ? ;)
Moi je ne sais pas faire... :(
 
spout
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
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.
 
M
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
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
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
 
M
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>
 
M
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>
 
Vous devez vous connecter ou vous inscrire pour répondre ici.
Discussions similaires
P
Changer la couleur du background d'un <tr>
Réponses
21
Affichages
5K
spout
spout
KOogar
Ajouter une Opacité CSS sur une image en Background
Réponses
5
Affichages
2K
SeanWhite
S
P
Comment gérer le ALT d'une image en CSS background-image
Réponses
10
Affichages
4K
WebRankInfo
WebRankInfo
valserine
La background image du site et la vue en cache de google
Réponses
13
Affichages
2K
valserine
valserine
T
Background image sous conditions
Réponses
4
Affichages
2K
Titanboy
T
I
Problème css Habillage Background
Réponses
2
Affichages
2K
ivoyages
I
V
Dimension de mon background?
Réponses
2
Affichages
2K
vero76
V
F
Impression background page html
Réponses
5
Affichages
1K
spout
spout
M
Alt sur un background-image css.
Réponses
2
Affichages
2K
nickargall
nickargall
L
Background-image qui ne s'affiche plus suite REDIR htaccess
Réponses
1
Affichages
2K
Eric Voilier
E
I
Css : Mettre un lien hypertexte sur un background
Réponses
16
Affichages
14K
graphee
G
M
CSS - Ajax - Background
Réponses
3
Affichages
2K
monsieur.spam
M
M
Ajuster en fixe son background en CSS
Réponses
8
Affichages
3K
monsieur.spam
M
T
Background ou pas ???
Réponses
8
Affichages
1K
tsaong
T
S
Background publicitaire, quel coût ?
Réponses
22
Affichages
3K
Leonick
L
G
background-image ou img pour une image
Réponses
14
Affichages
6K
212communication
2
D
CSS 2 image en background
Réponses
8
Affichages
4K
douniacreation
D
J
Image en Background ...
Réponses
5
Affichages
2K
Schwarzer Stern
S
M
Newsletter html et background-image - prise de tête inside
Réponses
5
Affichages
3K
raljx
R
S
inserer une image dans le background de mon site
Réponses
12
Affichages
2K
Rod la Kox
R
Haut