Question

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

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

的Javascript

var conditionalContent1 = $('#conditional1'),
group = $('input[type=checkbox][name=postage1]');

group.change(function() {
   conditionalContent1.toggle(group.filter(':checked').val() === 'Yes');
}).change();

当我选中复选框新div打开时，我想完成的是。当我点击关闭链接时，打开div关闭并取消选中复选框。如何做到这一点。有人可以帮忙吗？

Answer 1

您可以在复选框上使用change事件。并toggle隐藏/显示div。

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

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

演示：http://jsfiddle.net/tusharj/n7044syx/1/

Answer 2

您可以使用切换功能和点击事件来实现您提到的内容。

＆＃13;

$('#postageyes').click(function() {
  $('#conditional1').toggle();
});

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<label>
  <input type="checkbox" id="postageyes" name="postage1" value="Yes" />Yes</label>
<div id="conditional1" style="display:none">
  <p>This should only show when the 'Yes' checkbox &lt;input&gt; element is checked.</p>
  <a href="">close</a>
</div>

＆＃13;

Answer 3

编辑：Tushar在写这篇文章时更新了他的答案......是的，没关系！那也行。不过，这一点仍然存在。

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

我已经修改过Tushar的jsfiddle以显示我的意思。您可能能够使其更加简化，但简单的版本是：

将a标签替换为：

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

然后将以下内容添加到js：

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

https://jsfiddle.net/pnq8zu0L/

带复选按钮的JavaScript复选框

3 个答案: