Question

当用户选中复选框时，我想淡出/淡出行背景颜色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>

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

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

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

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

2 个答案: