选中复选框时更改表格列文本的颜色答案

【问题标题】：Changing color of table column text when checkbox is checked选中复选框时更改表格列文本的颜色
【发布时间】：2011-08-30 13:07:21
【问题描述】：

我有一个表格，其中每行第一列是一个复选框，其余列是文本。我想做的是为选中复选框的任何行追溯更改第 2:n 列中文本的颜色。

我正在使用 jQuery（并试图刷新我对它的了解），因此使用它的解决方案将是首选，但直接 JS 也是 AOK。

找到的解决方案：

$("input:checked").each(function(idx) {
   $(this).parent().siblings('td').css("color", "red");
});

【问题讨论】：

标签： javascript jquery checkbox html-table

【解决方案1】：

这是一个jsfiddle example，它在选中复选框时将sibling <td> 元素变为红色，在未选中复选框时将它们变为白色。

有了这个基本的 HTML，

<table>
    <tr><td><input type="checkbox" /></td><td>Cell 2</td><td>Cell 3</td></tr>
    <tr><td><input type="checkbox" /></td><td>Cell 2</td><td>Cell 3</td></tr>
    <tr><td><input type="checkbox" /></td><td>Cell 2</td><td>Cell 3</td></tr>
</table>

还有这个 Javascript。

(function($) {
    $(document).ready( function() {
        $('input[type=checkbox]').click( function(e) {
            var bgColor = $(this).attr('checked') == 'checked' ? '#f00' : '#fff';

            $(this).parent().siblings('td').css('background', bgColor);   
        }); 
    });

})(jQuery);

【讨论】：

他要求改变列的颜色，而不是行。
我认为他的意思是选中的复选框后面的列。也许他可以澄清一下。
是的，我认为你是对的。我需要停止这么快地阅读这里的问题。
别担心，每个人都会遇到：)
对 - mblase75 是正确的，这不是我想要的。我想要的是一个任意事件（例如页面上其他地方的一些其他控件、文档加载等），它将识别所有选中的行并将其他 TD 元素内的文本字段变成不同的颜色。我尝试使用你展示的东西，但它还没有工作（注意：在这个例子中，我只是使用你的 css 命令，并没有真正改变文本颜色）： $(input:checked).parent.siblings( 'td').css('背景',bgColor);