JQuery:如何根据复选框的初始状态隐藏/显示div？

Question

假设我有一个复选框和一个div,其中包含我想要隐藏/显示的元素,具体取决于要检查的复选框.

<input type = "checkbox" id = "myCheckbox"/>
<div id = "display-hide">
  //Contains more elements
</div>

现在,这是JQuery脚本可以解决这个问题.

<script type = "text/javascript">
  $(function () {
    $("#myCheckbox").click(function(){
        $("#display-hide").toggle(this.checked);
     });
      $("#display-hide").hide();
  });    
</script>

我第一次访问页面时,一切正常(即div被隐藏 - 当我选中复选框时,显示div).

但是,当我回到页面(例如编辑)时,无论复选框的值(已选中或未选中),都会先隐藏div.只有在取消选中然后再次检查后才能看到div.

我猜这是因为这句话:

$("#display-hide").hide();

无论如何都要验证复选框的值并相应地隐藏/显示div？

谢谢你的帮助

Answer 1

而不是这个:

$("#display-hide").hide();

你可以.triggerHandler()像这样使用:

$("#myCheckbox").triggerHandler('click');

这将执行click您刚刚绑定的处理程序而不实际执行click框,因此它使初始状态匹配,而不会干扰.整体看起来像这样:

$("#myCheckbox").click(function(){
  $("#display-hide").toggle(this.checked);
}).triggerHandler('click');

你可以在这里尝试一下