Question

<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>

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

这是关于这篇文章：if check box is checked display div

我想问一下如何使用此代码，但每次单击另一个复选框时，它会隐藏前一个div并打开一个新代码。只是一次显示一个div / content而不是同时显示两个div / content。感谢。

DEMO：http://jsfiddle.net/zgrRd/5/

Answer 1

您必须使用change代替click函数和内部评估函数，在开头添加以下行

$('input[type="checkbox"]').not($(this)).prop('checked',false).trigger('change');

在这里观看fiddle

Answer 2

如果我理解正确，您希望一次只打开一个<div>，这应该与复选框相关联。我解释一下，你一次只选中复选框，所以其他所有复选框都需要取消选中。

解决方案1：使用单选按钮

解决方案2：取消选中所有复选框，然后重新检查当前复选框。

显示<div>的解决方案基于解决方案2.首先隐藏所有<div>，然后显示相关的<div>。为您的所有<div>提供某个类（例如class="toggling"）或名称，以用作关闭所有内容的选择器。

$('input[type="checkbox"]').on("click", function() {
    var item = $(this);
    var relatedItem = $("#" + item.attr("data-related-item")).parent();
    $('.toggling').fadeOut(); //hide all
    relatedItem.FadeIn(); //show the current one
});

如果复选框是检查显示div但隐藏前一个打开div

2 个答案: