如果选中复选框,则显示或隐藏表行

邓肯·卢克

我想在选中复选框时隐藏表格行(内部带有输入字段)。我发现了一些可行的方法:

的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不太了解,但我确实需要这个

穆罕默德·希拉里​​扎德(Mohammed Shiralizadeh)

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

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

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

    }).change();
});

注意:我使代码更短。

jsfiddle

本文收集自互联网,转载请注明来源。

如有侵权,请联系[email protected] 删除。

编辑于
0

我来说两句

0条评论
登录后参与评论

相关文章

来自分类Dev

如果选中多个复选框,如何显示隐藏按钮

来自分类Dev

如果选中复选框,则显示和隐藏div

来自分类Dev

如果复选框被选中,如何显示/隐藏内容

来自分类Dev

如果复选框已选中,则隐藏复选框

来自分类Dev

选中复选框时隐藏/显示行

来自分类Dev

如果选中了复选框,则显示div,否则隐藏,除非选中了“显示全部”复选框

来自分类Dev

如果选中复选框,则删除行

来自分类Dev

如果选中复选框,则删除行

来自分类Dev

根据复选框隐藏/显示表行

来自分类Dev

显示基于复选框的隐藏表行

来自分类Dev

根据复选框显示/隐藏表行

来自分类Dev

如果在React JS中选中了复选框,如何隐藏或显示div

来自分类Dev

如果复选框被选中,则显示/隐藏div(通过搜索槽对象属性)

来自分类Dev

如果在表上未选中“复选框”,则隐藏按钮

来自分类Dev

jQuery:如果选中复选框,则隐藏输入框

来自分类Dev

选中复选框时显示数据表中的隐藏列

来自分类Dev

如果选中了一个复选框,请取消选中另一个复选框,然后显示/隐藏HTML代码

来自分类Dev

如果未选中该复选框,如何隐藏该复选框的父div?

来自分类Dev

选中复选框时显示/隐藏面板

来自分类Dev

选中复选框时显示/隐藏div

来自分类Dev

显示或隐藏WebGrid的“全部选中”复选框上的按钮

来自分类Dev

如何根据选中的复选框数量显示/隐藏元素?

来自分类Dev

jQuery隐藏\显示是否选中复选框

来自分类Dev

如果未选中任何复选框,则Javascript将显示表单的其余部分,如果其中的1或2个为复选框,则将其隐藏

来自分类Dev

如果选中复选框,则显示选择字段

来自分类Dev

如果选中复选框,则显示其余表格

来自分类Dev

如果选中复选框,则显示引导程序模态

来自分类Dev

如果复选框组中未选中任何复选框,则显示错误

来自分类Dev

如果选中复选框,则高亮显示在复选框之前的标签

Related 相关文章

  1. 1

    如果选中多个复选框,如何显示隐藏按钮

  2. 2

    如果选中复选框,则显示和隐藏div

  3. 3

    如果复选框被选中,如何显示/隐藏内容

  4. 4

    如果复选框已选中,则隐藏复选框

  5. 5

    选中复选框时隐藏/显示行

  6. 6

    如果选中了复选框,则显示div,否则隐藏,除非选中了“显示全部”复选框

  7. 7

    如果选中复选框,则删除行

  8. 8

    如果选中复选框,则删除行

  9. 9

    根据复选框隐藏/显示表行

  10. 10

    显示基于复选框的隐藏表行

  11. 11

    根据复选框显示/隐藏表行

  12. 12

    如果在React JS中选中了复选框,如何隐藏或显示div

  13. 13

    如果复选框被选中,则显示/隐藏div(通过搜索槽对象属性)

  14. 14

    如果在表上未选中“复选框”,则隐藏按钮

  15. 15

    jQuery:如果选中复选框,则隐藏输入框

  16. 16

    选中复选框时显示数据表中的隐藏列

  17. 17

    如果选中了一个复选框,请取消选中另一个复选框,然后显示/隐藏HTML代码

  18. 18

    如果未选中该复选框,如何隐藏该复选框的父div?

  19. 19

    选中复选框时显示/隐藏面板

  20. 20

    选中复选框时显示/隐藏div

  21. 21

    显示或隐藏WebGrid的“全部选中”复选框上的按钮

  22. 22

    如何根据选中的复选框数量显示/隐藏元素?

  23. 23

    jQuery隐藏\显示是否选中复选框

  24. 24

    如果未选中任何复选框,则Javascript将显示表单的其余部分,如果其中的1或2个为复选框,则将其隐藏

  25. 25

    如果选中复选框,则显示选择字段

  26. 26

    如果选中复选框,则显示其余表格

  27. 27

    如果选中复选框,则显示引导程序模态

  28. 28

    如果复选框组中未选中任何复选框,则显示错误

  29. 29

    如果选中复选框,则高亮显示在复选框之前的标签

热门标签

归档