Question

以下是我的代码，但它不起作用..

    $('TABLE TBODY TR TD').click(function()
                         {
                        var color=$(this).css('background-color');
                        var x=$(this).find(':checkbox').prop('checked');
                        if(x)
                        {
                         $(this).index();
                         $(this).css("background-color", "red");                          
                        }
                        });

这是我的HTML

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

请有人帮帮我。

Answer 1

也许像这样的方法可以更好一点。

$("td input[type=checkbox]").click(function(){
    if($(this).is(':checked'))
        $(this).parent("td").css("background-color", "red");
});

Answer 2

使用color plugin制作动画。对于普通的CSS，您必须指定bind to click to INPUT按钮，而不是表格单元格

你必须修改为

  $('TABLE TBODY TR TD input').click(function()
                     {


                     $(this).parent("td").css("background-color", "red");                          
                    }
                    });

Answer 3

您的问题是，您希望在单击复选框时更改背景，所以请执行以下操作：

$('td input[type=checkbox]').change(function() {
    if($(this).is(':checked')) {
        // change background color to $(this).parent();
    } else {
        // Turn off background color
    }
});

免责声明：未经测试。

Answer 4

在$('TABLE TBODY TR TD').click(function()上定义事件不起作用，因为您希望在单击复选框时更改事件，而不是单元格。

你可以：

在复选框输入上定义一个类，在click函数中，确定单击哪一个并更改相应的背景颜色
在每个复选框上定义唯一ID，但这需要为每个ID添加click函数（这意味着您正在编写重复的代码，并且不是很干净）

Answer 5

类似的东西:) ....固定值的颜色是动态的......每个复选框都有不同的颜色？

<table>
<tr><td><input type="checkbox" class="colorswitcher"></td><td><input type="radio"></td></tr>
<tr><td><input type="checkbox" class="colorswitcher"></td><td><input type="radio"></td></tr>
<tr><td><input type="checkbox" class="colorswitcher"></td><td><input type="radio"></td></tr>
</table>

$(document).ready(function() {
        $(".colorswitcher").click(function() {
            if($(this).is(":checked")) {
                $(this).closest("td").css("background","#000");  
            }else {
               $(this).closest("td").css("background","#fff");
            } 
        });
    });

Answer 6

$(function() {
    $('table td input[type=checkbox]').click(function() {
        $(this).closest('td').css('background-color', $(this).prop('checked') ? 'red' : 'white');
    })
})

这是最简单的方法，经过测试。

Answer 7

这是我的例子：

<table>
    <tr>
        <td><input type="checkbox"></td>
        <td>AAA</td>
        <td>AAA</td>
    </tr>
    <tr>
        <td><input type="checkbox"></td>
        <td>BBB</td>
        <td>BBB</td>            
   </tr>
    <tr>
        <td><input type="checkbox"></td>
        <td>CCC</td>
        <td>CCC</td>
   </tr>
</table>

$("input[type=checkbox]").click(function(){
    if($(this).is(':checked')){
        $(this).parent().siblings('td').addClass("activ");
        $(this).parent("td").addClass("activ");
    }else{
        $(this).parent().siblings('td').removeClass("activ");
        $(this).parent("td").removeClass("activ");
    }
});


td.activ{
    background:yellow
}

click :D

通过检查其中的复选框的值来更改背景

7 个答案: