如果选中复选框，则显示或隐藏表格行答案

【问题标题】：Show or hide table row if checkbox is checked如果选中复选框，则显示或隐藏表格行
【发布时间】：2015-02-21 15:26:35
【问题描述】：

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

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

Fiddle

但这仅适用于尚未选中复选框的情况。因此，如果在开始时选中该复选框，我希望隐藏表格行。我该怎么做？

请注意，我对 JavaScript 了解不多，但我确实需要这个

【问题讨论】：

这种问题已经在这里问过很多次了...
@ChristopherW - Google 显然是一门失传的艺术。
@jalynn2 显然搜索功能一般

标签： javascript jquery html checkbox show-hide

【解决方案1】：

附加事件后触发.change()事件：

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

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

    }).change();
});

注意：我使代码更短。

jsfiddle

【讨论】：

【解决方案2】：

只需在初始注册后调用更改事件：

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

【讨论】：

【解决方案3】：

我相信这就是你要找的东西：

$(function() {
  var init = true;
  $('input[type="checkbox"]').change(function() {
    if (this.checked) {
      if (init) {
        $(this).prev().hide();
        init = false;
      } else $(this).prev().slideUp();
    } else $(this).prev().slideDown();
  }).change();
});

input[type='text'] {
  display: block;
  padding: 3px 5px;
  margin: 5px 0;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div>
  <input type="text" placeholder="Shown" />
  <input type="checkbox" />Hide input
</div>

<div>
  <input type="text" placeholder="Hidden" />
  <input type="checkbox" checked/>Hide input
</div>

【讨论】：

【解决方案4】：

没有硬编码 id 的通用解决方案：

$('table :checkbox').change(function(e, speed) {
    speed = typeof speed == 'undefined' ? 'slow' : 0;
    $(this).closest('tr').prev()[this.checked ? 'fadeOut' : 'fadeIn'](speed);
}).trigger('change', [0]);

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table>
    <tr id="row1">
        <td><input type="text"></td>
        <td><input type="text"></td>
    </tr>
    <tr>
        <td><input type="checkbox" id="checkbox1">Hide inputs</td>
    </tr>
        
    <tr id="row2">
        <td><input type="text"></td>
        <td><input type="text"></td>
    </tr>
    <tr>
        <td><input type="checkbox" id="checkbox2" checked>Hide inputs</td>
    </tr>
</table>

【讨论】：

【解决方案5】：

在 document.ready 之后调用 change 函数

 $('#checkbox').change();

这样

$(document).ready(function () {

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

这里是DEMO FIDDLE

【讨论】：

【解决方案6】：

缪斯凡的回答很好，但追随也是另一种方式！

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

【讨论】：

【解决方案7】：

如果您确实希望最初选中复选框，则可以最初隐藏它们。

<table>
<tr id="row" style="display: none;">
    <td><input type="text"></td>
    <td><input type="text"></td>
</tr>
<tr>
    <td><input type="checkbox" id="checkbox" checked>Hide inputs</td>
</tr>
</table>
<script>
$(document).ready(function () {
$('#checkbox').change(function () {
    if (!this.checked) 
        $('#row').fadeIn('slow');
    else 
        $('#row').fadeOut('slow');
});
});
</script>

【讨论】：

【解决方案8】：

var showOrHideRow=fucntion(isChecked){
   if (isChecked) 
            $('#row').fadeOut('slow');
        else 
            $('#row').fadeIn('slow');
};

$(document).ready(function () {
showOrHideRow($('#checkbox').is(":checked"));

    $('#checkbox').change(function () {
        showOrHideRow(this.checked);
    });

});

【讨论】：

【解决方案9】：

$('#tbl_name tr').find('input:checkbox:checked').closest('tr').show(); $('#tbl_name tr').find('input:checkbox:Unchecked').closest('tr').hide();

【讨论】：