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

假设我有这个复选框和一个div，其中包含我想要的隐藏/显示的元素，具体取决于选中或未选中的复选框。JQuery：如何根据复选框的初始状态来隐藏/显示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();

反正是有验证复选框的价值和隐藏/显示相应的股利？

感谢您的帮助

来源

2010-08-09 Richard77

取而代之的是：

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

您可以使用.triggerHandler()，像这样：

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

这会执行您刚刚绑定的click处理程序，而不会实际执行框上的click，因此它会使初始状态匹配而不会对产生干扰。整体而言，这看起来是这样的：

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

You can give it a try here

来源

2010-08-09 10:56:26

我喜欢它比。就是多（ “：勾选”） – KoolKabin 2010-08-09 11:06:25

好，此Javascript的businness通常难以掌握。我需要更多的关注。它现在工作完美。非常感谢。 – Richard77 2010-08-09 11:13:04

@Richard - Welcome :) btw即使在很短的例子中，你比很多开发者都做得更好，例如，你正在使用一个DOM属性，'this.checked'它可用。这绝对是正确的做法，不需要通过10种方法来获得一个属性，只有很多人无法通过他们的头......你已经正确地做到了这一点:) – 2010-08-09 11:18:48

我想你应该在你的代码编辑有点

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

来源

2010-08-09 10:56:06

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

回答

相关问题