带有折叠按钮的JavaScript复选框

我想让下面的代码适用于带有折叠按钮的复选框

<label>
    <input type="checkbox" id="postageyes" name="postage1" value="Yes" />Yes</label>
<div id="conditional1">
    <p>This should only show when the 'Yes' checkbox &lt;input&gt; element is checked.</p>
    <a href="">close</a>
</div>

当我选中复选框newdivopen时，我想完成的是。当我单击“关闭”链接时，打开的div将关闭并取消选中复选框。如何执行此操作。

---

任何人都可以提供帮助吗？

您可以使用

change

event-on复选框。和

切换

以隐藏/显示div

$('#postageyes').on('change', function() {
    $('#conditional1').toggle($(this).is(':checked'));
});

$('#conditional1').on('click', 'a', function() {
    $('#postageyes').prop('checked', false);
    $('#conditional1').hide();
    return false;
});

---

演示：

您可以使用切换功能并单击事件来实现您提到的功能

$（“#postageyes”）。单击（函数（）{
$（'#conditional1'）。toggle（）；
});

对
仅当选中“是”复选框输入元素时，才会显示此选项

编辑：我写这篇文章时，图萨更新了他的答案，所以。。。是的，没关系！这也会起作用。不过，这一点仍然存在


我认为部分问题在于你试图不恰当地使用锚定标签。将href留空将重新加载页面，因此Tushar的答案看起来是正确的，但实际上并不符合您的要求。使用一个按钮（如果您仍然希望它看起来像一个链接，请适当设置其样式），然后处理其单击事件以切换复选框并隐藏内容

我已经修改了Tushar的JSFIDLE来说明我的意思。您可能可以使其更加精简，但简单的版本是：

将a标记替换为：

<button id="closeButton">close</button>

当我单击close it reload fiddle时，您的代码在@Tushar运行page@Tushar完美：）+1
<button id="closeButton">close</button>

$('#closeButton').on('click', function () {
    $('#postageyes').click();
});