Couleur d'arrière-plan Fade In/Fade Out sur la case à cocher - Jquery

Je souhaite faire apparaître/disparaître la couleur d'arrière-plan de la ligne css lorsqu'un utilisateur cocher une case. Donc, quand ils vérifient, la ligne se fane en jaune vif. Quand ils le décochent, la ligne s'estompe en blanc.Couleur d'arrière-plan Fade In/Fade Out sur la case à cocher - Jquery

Voici le JS avec lequel je joue. J'utilise le plugin couleur:

<script type="text/javascript"> 
    <!-- 
    $(document).ready(function(){ 
     $("#Table input").click(function() { 
       if ($(this).attr("checked") == true) { 
       $(this).parent().parent().animate({'backgroundColor' : '#ffff99'}); 
       } else { 
       $(this).parent().parent().animate({'backgroundColor' : '#ffffff'}); 
       } 
     }); 
    }); 
    //--> 
</script>

et HTML

<form name="f"> 
<table id="Table" border="1"><tr> 
    <td width="117"><input type="checkbox" name="cb1" id="cb1" value="y" /></td> 
    <td width="309">Click me</td> 
</tr><tr> 
    <td><input type="checkbox" name="cb2" id="cb2" value="y" /></td> 
    <td>Click me</td> 
</tr><tr> 
    <td><input type="checkbox" name="cb3" id="cb3" value="y" /></td> 
    <td>Click me</td> 
</tr></table> 
</form>

Je suis un débutant complet donc merci pour l'aide

Source

2010-02-18 user200488

Je ne sais pas si c'est la meilleure solution ou non, mais c'est ce que j'ai fait pour obtenir votre code de travail:

Au lieu d'utiliser le plugin de couleur, incluez jQuery UI.
Passez animate une durée (telle que 500) ainsi que les propriétés. Après le .parent().parent(), ajoutez .children().

selon la demande, voici un exemple de travail:

<?xml version="1.0" encoding="UTF-8"?> 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" 
    "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en"> 
    <head> 
     <title>Test</title> 
     <style type="text/css" media="screen"> 
      html { 
       font-family:Helvetica, sans-serif; 
      } 
     </style> 
     <script type="text/javascript" src="http://www.google.com/jsapi" charset="utf-8"></script> 
     <script type="text/javascript" charset="utf-8"> 
      google.load('jquery', '1.4'); 
      google.load('jqueryui', '1.7.2'); 
     </script> 
     <script type="text/javascript" charset="utf-8"> 
      $(document).ready(function(){ 
       $("#table input").click(function() { 
        var color=$(this).attr('checked')?'#ffff99':'#ffffff'; 
        $(this).parent().parent().children().animate({'backgroundColor':color}, 500); 
       }); 
      }); 
     </script> 
    </head> 
    <body> 
     <form> 
      <table id="table"> 
       <tr> 
        <td width="117"> 
         <input type="checkbox" name="cb1" id="cb1" value="y" /> 
        </td> 
        <td width="309"> 
         Click me 
        </td> 
       </tr> 
       <tr> 
        <td> 
         <input type="checkbox" name="cb2" id="cb2" value="y" /> 
        </td> 
        <td> 
         Click me 
        </td> 
       </tr> 
       <tr> 
        <td> 
         <input type="checkbox" name="cb3" id="cb3" value="y" /> 
        </td> 
        <td> 
         Click me 
        </td> 
       </tr> 
      </table> 
     </form> 
    </body> 
</html>

Source

2010-02-18 05:31:41 icktoofay

Pouvez-vous coller le script ici, je peux voir la chose entière. Je vous remercie !! – user200488

Selon votre demande, j'ai ajouté un exemple de travail complet. Aussi: si cela a fonctionné, s'il vous plaît cliquez sur la petite coche près de ma réponse pour le marquer comme correct. – icktoofay

$(function(){ 
    $("#Table input:checkbox").click(function(){ 
      var elem = $(this); 
     if (elem.is(":checked")) 
     { 
      elem.closest("tr").animate({'backgroundColor' : '#ffff99'}); 
     } 
     else 
     { 
      elem.closest("tr").animate({'backgroundColor' : '#ffffff'}); 
     } 
    }); 
});

Source

2010-02-18 05:36:38 rahul

Cela a-t-il fonctionné pour vous? Je reçois une erreur JS dans IE – user200488

Couleur d'arrière-plan Fade In/Fade Out sur la case à cocher - Jquery

Répondre

Questions connexes