复选框淡入/淡出背景颜色-jquery

我想在用户选中复选框时淡入/淡出行背景色css。所以当他们检查它时，这一行淡入亮黄色。当他们取消检查时，该行淡出为白色。复选框淡入/淡出背景颜色-jquery

这是我玩的JS。我使用的颜色插件：

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

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

我是一个完整的新手，所以感谢您的帮助

来源

2010-02-18 user200488

我不知道这是否是最好的解决办法还是不行，但这是我做的代码工作：

而不是使用颜色插件，包括jQuery UI。
通过animate持续时间（如500）以及属性。
.parent().parent()之后，加.children()。

根据要求，这里有一个工作示例：

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

来源

2010-02-18 05:31:41 icktoofay

可以粘贴脚本这里，所以我可以看到整个事情。谢谢！！ – user200488 2010-02-21 21:44:52

根据您的要求，我添加了一个完整的工作示例。另外：如果这个工作正常，请点击我答案附近的小复选标记，将其标记为正确。 – icktoofay 2010-02-21 22:11:54

$(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'}); 
     } 
    }); 
});

来源

2010-02-18 05:36:38 rahul

是否为你工作？我在IE中得到一个JS错误 – user200488 2010-02-21 21:44:06

复选框淡入/淡出背景颜色-jquery

回答

相关问题