显示Div部分以显示/隐藏模态

Question

我正在使用Bootstrap Modal并且希望显示和隐藏Checkbox Checked事件中的Bootstrap Modal可用的div部分。

即使我已经正确匹配了我的复选框，也检查了逻辑。 它与实现并没有相同。 我可以解决此问题的任何方法。

<div class="modal-body">
  <div class="form-check">
    <input class="form-check-input" type="checkbox" value="" id="ddd" />
    <label class="form-check-label" for="ddd">
      DDD
    </label>
  </div>

  <script>
    $("#ddd").change(function () {
      if (this.checked) {
        $("aaa").toggle();
      }
    })
  </script>

  <!--Begin the Show/Hide Section-->
  <div id="aaa">
    <form>
      <div class="form-group">
        <label for="ccc">ccc</label>
        <input type="text" class="form-control" id="question" disabled />
      </div>
    </form>
  </div>
</div>

Answer 1

您忘记在jquery选择器中添加＃。 $('#aaa').toggle();

您也可以删除检查器。 如果要先隐藏它，只需在aaa div中添加display:none ，然后.toggle（）将完成其余工作。 因此，当未选中该复选框时，它是隐藏的，然后如果您选中了该复选框，它将显示出来。

 $("#ddd").change(function () { $("#aaa").toggle(); }) 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.2.3/jquery.min.js"></script> <div class="modal-body"> <div class="form-check"> <input class="form-check-input" type="checkbox" value="" id="ddd" /> <label class="form-check-label" for="ddd"> DDD </label> </div> <div id="aaa" style="display:none"> <form> <div class="form-group"> <label for="ccc">ccc</label> <input type="text" class="form-control" id="question" disabled /> </div> </form> </div> </div>