使用.toggle（）在一个div上切换另一个div

Question

到目前为止，我如何使用.toggle切换两个div：

$('#toggler').change(function() {
    $('#div1').toggle();
    $('#div2').toggle();
});

切换器是一个检查按钮-我希望div 1在true时出现，div 2消失而在false时出现相反的情况，有什么想法吗？

编辑**-我无法使用.hide（），就好像我在选中复选框的情况下启动页面时，切换将以错误的方式进行

Answer 1

您可以在toggle（）中放置一个布尔值

var isChecked = $('#toggler').is(':checked');

$('#toggler').change(function() {
    $('#div1').toggle(isChecked);
    $('#div2').toggle(!isChecked);
});

jQuery文档-

$( "#foo" ).toggle( showOrHide );

等价于-

if ( showOrHide === true ) {
    $( "#foo" ).show();
} else if ( showOrHide === false ) {
    $( "#foo" ).hide();
}

Answer 2

试试这个小提琴： http : //jsfiddle.net/sWJ9u/1/

$(document).ready(function () {
    $('#toggler').change(function () {
        var input = $(this);
        var div = input.is(':checked') ? $('#div1') : $('#div2');
        $('div').hide();
        div.show();
       });
});