如果选中复选框，则显示或隐藏表格行 [英] Show or hide table row if checkbox is checked

问题描述

我想在选中复选框时隐藏表格行（包含输入字段）。
我发现了一些有用的东西：

I want to hide a table row (with input fields inside) when a checkbox is checked. I found something that works:

HTML

<table>
    <tr id="row">
        <td><input type="text"></td>
        <td><input type="text"></td>
    </tr>
    <tr>
        <td><input type="checkbox" id="checkbox">Hide inputs</td>
    </tr>
</table>

脚本

$(document).ready(function () {
    $('#checkbox').change(function () {
        if (!this.checked) 
            $('#row').fadeIn('slow');
        else 
            $('#row').fadeOut('slow');
    });
});

小提琴

但这仅在未选中复选框时才有效。因此，如果在开头选中复选框，我希望隐藏表格行。我该怎么做？

But this only works if the checkbox is not checked already. So if the checkbox is checked at the beginning, I want the table row to be hidden. How do I do this?

请注意我对JavaScript不太了解，但我真的需要这个

推荐答案

触发 .change（）<附加事件后的事件：

trigger .change() event after you attach events:

$(function () {
    $('#checkbox1, #checkbox2').change(function () {
        var row = $(this).closest('tr').prev();

        if (!this.checked)
            row.fadeIn('slow');
        else 
            row.fadeOut('slow');

    }).change();
});

注意：我缩短了代码。

jsfiddle

jsfiddle

这篇关于如果选中复选框，则显示或隐藏表格行的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！