如果選中復選框，則顯示或隱藏表格行

Question

我想在選中復選框時隱藏表格行（包含輸入字段）。 我發現了一些有用的東西：

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

小提琴

但這僅在未選中復選框時才有效。 因此，如果在開頭選中復選框，我希望隱藏表格行。 我該怎么做呢？

請注意，我對JavaScript知之甚少，但我確實需要這個

Answer 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

Answer 2

只需在最初注冊后調用change事件：

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

Answer 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> 

Answer 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> 

Answer 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

Answer 6

Musefan的答案非常好，但以下也是另一種方式！

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

Answer 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>

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

});

Answer 9

$（'＃tbl_name tr'）。find（'input：checkbox：checked'）。nearest（'tr'）。show（）; $（'＃tbl_name tr'）。find（'input：checkbox：Unchecked'）。nearest（'tr'）。hide（）;