Jquery 如何使用复选框和.next（）显示/隐藏/切换表单中的div

我正在尝试使用jquery切换div-基本上是想隐藏表单的一部分，并且只在用户选择特定复选框时显示它

现在，我在下面有了这段代码，它工作得很好，但是我不知道编辑它的内容和位置，以便与复选框而不是链接一起使用。另外，我不想使用ID

以下是示例代码：

.answer { display:none; }

$("a.question").click(function(){
 $(this).next(".answer").toggle();
}); 

<a href="#" class="question">Queston 1</a>
<div class="answer">Answer 1</div>

<a href="#" class="question">Queston 2</a>
<div class="answer">Answer 2</div>

.answer{display:none；}
$（“a.question”）。单击（函数（）{
$（this.next（“.answer”）.toggle（）；
}); 
答复1
答复2

任何帮助都将不胜感激，因为这快把我逼疯了

试试这个

.answer { display:none; }​

<input type="checkbox" class="question" /> : Queston 1
<div class="answer">Answer 1</div>

<input type="checkbox" class="question" /> : Queston 2
<div class="answer">Answer 2</div>​

    $(".question").click(function() {
        if ($(this).is(':checked')) {
            $(this).next(".answer").show();
        }
        else{
            $(this).next(".answer").hide();
        }
    });​

.answer{display:none；}​
：奎斯顿1
答复1
：奎斯顿2
答复2​
$（“.question”）。单击（函数（）{
如果（$（this）.is（':checked'））{
$（this.next（“.answer”）.show（）；
}
否则{
$（this.next（“.answer”）.hide（）；
}
});​

：工作小提琴

代码：

奎斯顿1号 答复1 奎斯顿2号 答复2​ $（“input.question”）。单击（函数（）{ $（this.next（“.answer”）.toggle（）； }); ​ CSS：

.answer { display:none; }​

<input type="checkbox">Question 1</input>
<div class="answer">Answer 1</div>
<br/>
<input type="checkbox">Question 2</input>
<div class="answer">Answer 2</div>​

$("input[type='checkbox']").on("change", function(){
 $(this).next(".answer").toggle();
}); ​

HTML：

.answer { display:none; }​

<input type="checkbox">Question 1</input>
<div class="answer">Answer 1</div>
<br/>
<input type="checkbox">Question 2</input>
<div class="answer">Answer 2</div>​

$("input[type='checkbox']").on("change", function(){
 $(this).next(".answer").toggle();
}); ​

修改代码：

Html:

那么：

<input class="check" type="checkbox" >
<div class="answer">Answer 1</div>

<input class="check" type="checkbox" >
<div class="answer">Answer 2</div>​
<style type="text/css">
.answer { display:none; }
.check:checked+.answer{
display:block;
}
​
</style>

答复1
答复2​
.答案{显示：无；}
.勾选：勾选+.回答{
显示：块；
}
​

js是不需要的。 演示：
浏览器支持“+”css选择器-

ASP.NET：

 <asp:CheckBox ID="addinfoChk" runat="server" onclick="javascript:OpenPopup(this,'addinfopanel');" />
 <div id="addinfopanel" style="display: none"></div>

<asp:CheckBox ID="addChk" runat="server" onclick="javascript:OpenPopup(this,'addpanel');" />
 <div id="addpanel" style="display: none"></div>

JavaScript:

<script type="text/javascript">
    function OpenPopup(obj, divid) {
        if (obj.checked == true)
            document.getElementById(divid).style.display = 'block';
        else {
            document.getElementById(divid).style.display = 'none';
        }
    }

</script>

函数OpenPopup（obj，divid）{
if（obj.checked==true）
document.getElementById（divid）.style.display='block'；
否则{
document.getElementById（divid）.style.display='none'；
}
}

与您的代码相关的复选框在哪里？复选框1复选框2这在测试环境中非常有效，谢谢！但问题是，我是在标准的Twitter引导框架内开发的，而它似乎在这个框架内不起作用。有什么建议吗？谢谢。这在测试环境中也很有效，但我正在标准的Twitter引导框架中开发，而它似乎在测试环境中不起作用。有什么建议吗？这在测试环境中非常有效，谢谢！但问题是，我是在标准的Twitter引导框架内开发的，而它似乎在这个框架内不起作用。有什么建议吗？我真的很喜欢这个未充分利用（IMO）的解决方案。但我发现自己并不经常使用它，因为一旦你想把div移到其他地方，它就会停止工作，这不是直接的下一个元素

 <asp:CheckBox ID="addinfoChk" runat="server" onclick="javascript:OpenPopup(this,'addinfopanel');" />
 <div id="addinfopanel" style="display: none"></div>

<asp:CheckBox ID="addChk" runat="server" onclick="javascript:OpenPopup(this,'addpanel');" />
 <div id="addpanel" style="display: none"></div>

<script type="text/javascript">
    function OpenPopup(obj, divid) {
        if (obj.checked == true)
            document.getElementById(divid).style.display = 'block';
        else {
            document.getElementById(divid).style.display = 'none';
        }
    }

</script>