隐藏 HTML 表单，直到执行操作答案

【问题标题】：Hide HTML form until action is performed隐藏 HTML 表单，直到执行操作
【发布时间】：2020-09-18 12:48:22
【问题描述】：

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

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

编辑：根据要求，帖子包含完整的 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;
}

【问题讨论】：

您能否更新问题以包含一个完整的示例来演示该问题？
这可能会发生，因为由于某种原因，您的复选框总是会返回 true，因此您的 JS 会覆盖初始 css。或者你的css不包括在内。
与问题无关： checked 是一个布尔属性。您不必将其与其他布尔值进行比较。 if(checkBox.checked){ 就足够了。此外，您的 else 操作应该是 .style.display="" 以默认返回 css 定义。
这段代码的逻辑似乎是正确的，你能告诉我们你正在使用的HTML吗？
@AristeidisKaravas 谢谢，但不，我停用了 JS，但 display:none 仍然没有隐藏表单（或任何 input 元素）

标签： javascript html css forms

【解决方案1】：

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

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>

【讨论】：

【解决方案2】：

您的逻辑确实有效，问题可能出在您的 css 文件中，可能是具有更高特异性的选择器覆盖了您的 css 规则。

您的代码版本略有不同，但运行良好。

showForm = () => {
    checkbox.checked
        ? form1.style.display="block"
        : form1.style.display="none";
}

#form1 { display:none; }

<input type="checkbox" id="checkbox" onclick="showForm()">
<form action="" id="form1"> The Form </form>

【讨论】：

【解决方案3】：

我认为你有一些东西可以覆盖你的 display: none 类。如果您只是将表单放在与复选框相同的 div 容器中，则您实际上并不需要 javascript。

input#buildPIT ~ form#regressionBuilder {
  display: none  
}

#buildPIT:checked ~ #regressionBuilder {
  display: block;
}

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

  <form class="form" id="regressionBuilder" method="post">
    <input class = "btn btn-primary" type="submit" name="buildRegression" value="CALCULATE" >
  </form>
</div>

【讨论】：