javascript - 选中复选框更改 td 颜色

Question

我有一张桌子，我想更改颜色或<td>选中其中的复选框<td>

<table>
 <% for (int i = 0; i < ds.Tables[0].Rows.Count; i++)
                   {
                %>
                <tr>
                    <td>
                        <b>
                            <%Response.Write(Convert.ToDateTime(ds.Tables[0].Rows[i]["StartTime"].ToString()).ToString("hh:mm")); %>
                            -
                            <%Response.Write(Convert.ToDateTime(ds.Tables[0].Rows[i]["EndTime"].ToString()).ToString("hh:mm")); %></b>
                    </td>
                    <td>
                        <asp:CheckBox ID="chk" runat="server" />
                    </td>
                    <td>
                        <asp:CheckBox ID="CheckBox1" runat="server" />
                    </td>
                    <td>
                        <asp:CheckBox ID="CheckBox2" runat="server" />
                    </td>
                    <td>
                        <asp:CheckBox ID="CheckBox3" runat="server" />
                    </td>
                    <td>
                        <asp:CheckBox ID="CheckBox4" runat="server" />
                    </td>
                    <td>
                        <asp:CheckBox ID="CheckBox5" runat="server" />
                    </td>
                    <td>
                        <asp:CheckBox ID="CheckBox6" runat="server" />
                    </td>
                </tr>
                <%
                    } %>
            </table>

Answer 1

JS 小提琴：http: //jsfiddle.net/satpalsingh/KPXrU/

HTML：

<table>
    <tr>
        <td><input type="checkbox" /></td>
        <td><input type="checkbox" /></td>
        <td><input type="checkbox" /></td>
    </tr>   
 </table>

JS：

$(function(){
    $( "input[type=checkbox]" ).on("change", function(){
        if($(this).is(':checked'))
            $(this).parent().css('background-color', '#cd0000');
        else
            $(this).parent().css('background-color', '');
    });
});

Answer 2

您可以在 jquery 中获取所有标签。参考以下两个链接

从这些链接中，了解如何在 jquery 中获取所有标签，然后你可以玩弄那个 .. 可能是第二个链接可以给你更多的想法

使用JQUERY获取div标签中表的所有td标签

无法使用 JQuery 设置“TD”的背景颜色

Answer 3

像这样的东西？

$('[id^="CheckBox"]').on('change',function(){
   if($(this).is(':checked')){
      $(this).parent().css('background','red');
   }else{
      $(this).parent().css('background','');
   }
});

Answer 4

干得好。也应该在所有 IE 中工作：

(function($){

    $(function() {
        var _ie = /msie\s[6789]/gi.test(window.navigator.userAgent),
            _event = _ie ? 'propertychange' : 'change';

        $('td').each(function() {
            var el = $(this),
                input = el.find('input');

            input.bind(_event, function() {
                el.css('color', '#yourcolor');
            });
        });
    });
})(jQuery);