javascript - 如何根据复选框检查隐藏和取消隐藏网页上的 DIV？

Question

我试过这个，但它不工作：

$('cbxShowNotifications').click(function()
{
    var tview = $('#treeview');

    if ($(this).checked)
    {
        tview.show();
    }
    else
    {
        tview.hide();
    }
});

编辑 -

修复了一些问题，但在隐藏 DIV 后仍然无法显示它：

$('#cbxShowNotifications').on('click', (function()
{
    var tview = $('#treeview');

    if ($(this).checked)
    {
        tview.show();
    }
    else
    {
        tview.hide();
    }
}));

Answer 1

将 ($(this).checked) 更改为 ($(this).is(':checked'))

Answer 2

您有一些语法问题，您应该监视复选框上的更改事件：

$('#cbxShowNotifications').on('change', function () {
    var tview = $('#treeview');
    if ($(this).prop('checked')) {
        tview.show();
    } else {
        tview.hide();
    }
});

注意：您可以通过更改事件的触发器来设置初始状态：

$('#cbxShowNotifications').trigger('change');

Answer 3

你可以这样做：

$('#treeview').on({
    'change': function(){
        if ($('div').css('display') == 'block') {
            $('div').hide();
        } else {
            $('div').show();
        }
    }
})

jsfiddle：http: //jsfiddle.net/PWAwz/

Answer 4

这是你要搜索的吗？我在下面编写了代码，您可以检查它们是否也在示例中工作。http://jsfiddle.net/jquerybyexample/xe7aL/

$(document).ready(function(){
    $('.checkbox1').change(function(){
         $('.tview').toggle('fast');
    });
});

Answer 5

我知道您的问题与 jQuery 有关，但如果目的纯粹是为了展示，也许您可​​以考虑使用 CSS 方法来完成同样的事情：

#treeview {
  display: none
}

#cbxShowNotifications:checked ~ #treeview {
  display: block
}

您可以在这里查看一个示例：http: //jsfiddle.net/BZQX4/5/