时间戳

首页 > 解决方案 > 隐藏 HTML 表单，直到执行操作

javascript - 隐藏 HTML 表单，直到执行操作

问题描述

我正在使用复选框来隐藏/取消隐藏表单。

下面的代码正确地做到了这一点，但我需要首先隐藏表单，并且只有在选中复选框后才会显示。

编辑：根据要求，帖子包含完整的 HTML。我调试删除所有其他 css/crispy 表单/模板扩展等无济于事。

html：

<!DOCTYPE html>

{% load static %}
{% load crispy_forms_tags %}

  {% block body_block %}
  <link rel="stylesheet" href="{% static 'css/regressionBuilder.css' %}">

  <script type="text/javascript">
  function enableRegressionBuilder(){
    var checkBox = document.getElementById("buildPIT");
    if (checkBox.checked == true){
            document.getElementById("regressionBuilder").style.display="block";
          }
        else{
            document.getElementById("regressionBuilder").style.display="none";
      }
    }
  </script>


    <div class="custom-control custom-switch">
      <input type="checkbox" class="custom-control-input" id="buildPIT" onChange="enableRegressionBuilder();">
      <label class="custom-control-label" for="buildPIT">Build PIT</label>
    </div>


      <form class="form" id="regressionBuilder" method="post">
        {% csrf_token %}

        {{ form2|crispy }}

        <input class = "btn btn-primary" type="submit" name="buildRegression" value="CALCULATE" >
      </form>


  {% endblock %}

这可行，但以下css内容应该最初隐藏表单，这没有发生：

#regressionBuilder {
  display:none;
}

标签： javascripthtmlcssforms

解决方案

您可以查看与您的代码类似的这个工作示例。

function showForm(){
    var checkBox = document.getElementById("checkbox");
    if (checkBox.checked == true){
     document.getElementById("form1").style.display="block";
    }
   else{
     document.getElementById("form1").style.display="none";
      }
    }
#form1 {
  display: none;
}
<h3>Hide/Show</h3>
<input type="checkbox" onclick="showForm()" id="checkbox"/>
<div id="form1">
  Form
</div>

推荐阅读