如果选中复选框，则显示div

Question

我正在尝试构建类似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();
});

Answer 1

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

演示： 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-为前缀即可。

Answer 2

我认为， Jquery UI使用Cookie保存状态 ，是你在重新加载之间控制状态的缺失部分吗？

Answer 3

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
});