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

Discussion dans 'Développement d'un site Web ou d'une appli mobile' créé par OTP, 30 Mai 2016.

  1. OTP
    OTP WRInaute accro
    Inscrit:
    16 Décembre 2005
    Messages:
    14 717
    J'aime reçus:
    2
    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
     
  2. Louis63
    Louis63 WRInaute discret
    Inscrit:
    22 Février 2016
    Messages:
    103
    J'aime reçus:
    0
  3. OTP
    OTP WRInaute accro
    Inscrit:
    16 Décembre 2005
    Messages:
    14 717
    J'aime reçus:
    2
    Merci.
    Et tu ferais comment pour changer la couleur en partant de ce code ? ;)
    Moi je ne sais pas faire... :(
     
  4. spout
    spout WRInaute accro
    Inscrit:
    14 Mai 2003
    Messages:
    8 782
    J'aime reçus:
    240
    @OTP: tu pourrais être plus précis ?
    Une couleur différente pour chaque radio ? Le div / cellule contient les radio ? Etc...
     
  5. OTP
    OTP WRInaute accro
    Inscrit:
    16 Décembre 2005
    Messages:
    14 717
    J'aime reçus:
    2
    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.
     
  6. MikeR
    MikeR WRInaute passionné
    Inscrit:
    9 Janvier 2010
    Messages:
    1 416
    J'aime reçus:
    0
    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>
    
     
  7. spout
    spout WRInaute accro
    Inscrit:
    14 Mai 2003
    Messages:
    8 782
    J'aime reçus:
    240
    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
     
  8. MikeR
    MikeR WRInaute passionné
    Inscrit:
    9 Janvier 2010
    Messages:
    1 416
    J'aime reçus:
    0
    Oui, mais ton code est bien plus beau ...
     
  9. OTP
    OTP WRInaute accro
    Inscrit:
    16 Décembre 2005
    Messages:
    14 717
    J'aime reçus:
    2
    Merci !
    Je m'y remets demain.
     
  10. OTP
    OTP WRInaute accro
    Inscrit:
    16 Décembre 2005
    Messages:
    14 717
    J'aime reçus:
    2
    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
     
  11. MikeR
    MikeR WRInaute passionné
    Inscrit:
    9 Janvier 2010
    Messages:
    1 416
    J'aime reçus:
    0
    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>
    
     
  12. OTP
    OTP WRInaute accro
    Inscrit:
    16 Décembre 2005
    Messages:
    14 717
    J'aime reçus:
    2
    Ok, je te remercie !
     
  13. MikeR
    MikeR WRInaute passionné
    Inscrit:
    9 Janvier 2010
    Messages:
    1 416
    J'aime reçus:
    0
    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>
    
    
     
  14. OTP
    OTP WRInaute accro
    Inscrit:
    16 Décembre 2005
    Messages:
    14 717
    J'aime reçus:
    2
    Tu es trop bon pour moi !
    Je m'y recolle demain.
    Un énorme merci.
     
Chargement...
Similar Threads - Background cellule div Forum Date
La background image du site et la vue en cache de google Débuter en référencement 26 Mars 2018
Un backgroundworker obligatoire pour un module de ecommerce ? Développement d'un site Web ou d'une appli mobile 15 Janvier 2018
Video en background : que faut-il en penser ? Développement d'un site Web ou d'une appli mobile 13 Septembre 2016
Publicité background possible? AdWords 13 Octobre 2015
Wordpress 3.5.1 et thème " photogra 1.2.3 " Problème slider background Développement d'un site Web ou d'une appli mobile 15 Avril 2013
Background image sous conditions Développement d'un site Web ou d'une appli mobile 8 Avril 2013
Problème css Habillage Background Développement d'un site Web ou d'une appli mobile 21 Mars 2013
Dimension de mon background? Développement d'un site Web ou d'une appli mobile 4 Février 2013
Impression background page html Développement d'un site Web ou d'une appli mobile 4 Juin 2012
Alt sur un background-image css. Développement d'un site Web ou d'une appli mobile 5 Mars 2012
  1. Ce site utilise des cookies. En continuant à utiliser ce site, vous acceptez l'utilisation des cookies.
    Rejeter la notice