jQuery - 表单提交后显示/隐藏复选框

时间:2016-11-28 22:16:30

标签: javascript jquery html

我在页面上有一个简单的显示/隐藏复选框,工作正常。

HTML

<label for="un-controls">Include Bells and Whistles </label>
<input class="un-controls" id="un-controls" type="checkbox" name="un-controls" value="y" />

<div id="un-controls" class="answer">
    <label for="spoon">Spoon: <input type="checkbox" name="spoon" id="spoon" value="y"></label>
</div>

的jQuery

$(".answer").hide();
$(".un-controls").click(function() {
  if($(this).is(":checked")) {
    $(".answer").show();
  } else {
    $(".answer").hide();
  }
});

这是JSFiddle:https://jsfiddle.net/Lqpv1fze/

我遇到的问题是,一旦提交表单,我希望“Bells and Whistles”复选框从用户提交表单时获取值。

将逻辑添加到我的脚本中以便在提交表单后框显示为已检查并且我再次显示该表单不是问题。我的问题是如何编辑jQuery代码,以便它还有一些逻辑来检查是否勾选了“取消控制”复选框(虽然我意识到我可以使用if(document.getElementById('un-controls) ').checked),如果是,则显示带有一类答案的div,然后让用户能够删除Bells和Whistles tick,即使在提交表单之后,还有额外的“ Spoon“选项再次隐藏,无需重新提交表单。

我试过了:

if(document.getElementById('un-controls').checked) {
    $(".answer").show();
} else {
    $(".un-controls").click(function() {
        if($(this).is(":checked")) {
            $(".answer").show();
        } else {
            $(".answer").hide();
        }
    });
}

然而,由于我的逻辑错误,这并没有解决它。

0 个答案:

没有答案