如果复选框被选中显示 div答案

【问题标题】：if check box is checked display div如果复选框被选中显示 div
【发布时间】：2013-03-20 16:28:08
【问题描述】：

我正在尝试构建类似 wordpress 选项的东西，用于在创建和文章时切换字段可见性。我所构建的依赖于$.click 函数，该函数使用相应的字段名称切换父级，我想知道如果选中该复选框，那么执行此操作的最佳方法是什么，因为如果我的代码会搞砸您选中一个框并重新加载页面，因为它是一次点击，而不是如果该框被实际选中。提前致谢！

http://jsfiddle.net/zgrRd/1/

HTML

<input type="checkbox" name="title">
<span class="caption">Title</span>

<div class="hidden">
  <h2>Title</h2>
  <input type="text" name="title">
  <span class="caption">Lorem</span>
</div>

jQuery

$('input[type="checkbox"]').click(function(){
    var item = $(this).attr('name');
    $('input[name="'+item+'"][type="text"]').parent().toggle();
});

【问题讨论】：

不确定我是否关注。看起来您的脚本有效，但您是说当页面重新加载时，您做了 Title 字段以根据复选框的状态保持隐藏状态？
您的输入元素没有正确关闭，您应该使用/>关闭它
我有它的工作但说如果我选中该框并重新加载页面复选框保持选中但输入 div 消失了，我的文档类型是 HTML5 你不需要 @987654329 @
根据您在 jsFiddle 中的示例，您在选中复选框时隐藏了输入字段，因此如果仍然选中 onreload 复选框，输入字段是否仍应隐藏？
@ToddB 我在单击复选框时隐藏了输入字段，这是它不依赖的问题是否选中，这里是它的实时链接，我猜你可以t真的重新加载..here

标签： jquery html input checkbox toggle

【解决方案1】：

HTML

<input type="checkbox" id="cbxShowHide"/><label for="cbxShowHide">Show/Hide</label>
<div id="block">Some text here</div>

css

#block{display:none;background:#eef;padding:10px;text-align:center;}

javascript/jquery

$('#cbxShowHide').click(function(){
this.checked?$('#block').show(1000):$('#block').hide(1000); //time for show
});

【讨论】：

【解决方案2】：

假设您在外部控制复选框的选中状态...

演示：http://jsfiddle.net/zgrRd/5/

换句话说，无论复选框处于何种状态，都会在页面加载时进行评估，因此如果未选中某个框，则相应的元素将开始隐藏。因此，如果您在服务器端设置一个选中该框的值，则此客户端 JavaScript 应该正确评估它。

JavaScript

function evaluate(){
    var item = $(this);
    var relatedItem = $("#" + item.attr("data-related-item")).parent();

    if(item.is(":checked")){
        relatedItem.fadeIn();
    }else{
        relatedItem.fadeOut();   
    }
}

$('input[type="checkbox"]').click(evaluate).each(evaluate);

HTML

<input type="checkbox" data-related-item="title1">
<span class="caption">Title</span>

<div class="hidden">
  <h2>Title</h2>
  <input type="text" id="title1">
  <span class="caption">Lorem</span>
</div>
<hr>
<input type="checkbox" data-related-item="title2" checked>
<span class="caption">Title</span>

<div class="hidden">
  <h2>Title</h2>
  <input type="text" id="title2">
  <span class="caption">Lorem</span>
</div>

注意我对data-* 属性的使用。这避免了使用一个字段的name 属性来指示与另一个字段的关系。你可以合法地命名这些属性，只要它们以data-为前缀即可。

【讨论】：

只是一个建议，但您可以将this 引用为评估方法中的复选框，并将您的绑定和初始评估链接在一起，如下所示：$('input[type="checkbox"]').click(evaluate).each(evaluate);
@Richard - 好建议；我已将其合并到一个更新的示例中。
非常感谢，使用data非常聪明，谢谢！

【解决方案3】：

我认为Jquery UI Save State Using Cookie，这是您在重新加载之间控制状态的缺失部分吗？

【讨论】：