Question

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

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();
});

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

Answer 1

您可以尝试此操作（使用change事件）：

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

Answer 2

您可以使用.prop()检查是否选中了复选框：

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

JSFiddle

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

选择输入检查[ed]框并向其父级添加样式

3 个答案:

JSFiddle