复选框上的淡入/淡出背景颜色 - Jquery答案

【问题标题】：Fade In/Fade Out background color on checkbox - Jquery复选框上的淡入/淡出背景颜色 - Jquery
【发布时间】：2016-06-20 09:30:44
【问题描述】：

当用户选中复选框时，我想淡入/淡出行背景颜色 css。因此，当他们检查它时，该行逐渐变为亮黄色。当他们取消选中它时，该行淡出为白色。

这是我正在玩的 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>

我是新手，谢谢你的帮助

【问题讨论】：

标签： jquery

【解决方案1】：

我不知道这是否是最佳解决方案，但这是我为使您的代码正常工作所做的：

不使用颜色插件，而是包含 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>

【讨论】：

你能把脚本贴在这里，这样我就可以看到整个事情了。谢谢！！
根据您的要求，我添加了一个完整的工作示例。另外：如果可行，请单击我的答案附近的小复选标记以将其标记为正确。

【解决方案2】：

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

【讨论】：