选择输入复选框并将样式添加到其父级答案

【问题标题】：Selecting input check[ed]box and adding style to its parent选择输入复选框并将样式添加到其父级
【发布时间】：2014-04-23 07:29:39
【问题描述】：

我正在选择一个复选框并向其父标记添加样式。它运作良好。我不知道的是如何做相反的方式，当它已经被检查并删除样式时。

http://jsfiddle.net/FG7jV/

HTML

<table>
    <tbody>
        <tr>
            <td><input type="checkbox" name="" value="" /></td>
            <td><img src="http://lorempixel.com/60/60/" /></td>
                    <td>Boné NFL - San Diego Charges</td>
         </tr>
      </tbody>
 </table>

JQUERY

$("input:checkbox").click(function() {
$(this).parent().parent().css("background-color","yellow");
});
$("input:checked").click(function(){
alert();
});

显然，我使用警报只是为了检查它是否在我点击时进行选择。

【问题讨论】：

标签： jquery html css

【解决方案1】：

你可以试试这个（使用change事件）：

$("input:checkbox").change(function() {
    if($(this).is(':checked')) {
        $(this).parent().parent().css("background-color","yellow");
    }
    else {
        $(this).parent().parent().css("background-color","");
    }
});

【讨论】：

【解决方案2】：

您可以使用.prop()来检查复选框是否在点击时被选中：

$("input:checkbox").click(function() {
    if(!$(this).prop("checked"))
        alert();
    else
        $(this).parent().parent().css("background-color","yellow");
});

JSFiddle

【讨论】：

【解决方案3】：

你可以用这个：

$("input:checkbox").click(function() {
var isChecked = $(this).attr('checked')?true:false;
if(isChecked){
$(this).parent().parent().css("background-color","yellow");
}
else
     $(this).parent().parent().css("background-color","");
});

【讨论】：