如果选中复选框打开表单 - HTML

在HTML中，我们可以使用复选框元素以及JavaScript代码，实现在选中复选框时展示表单的功能。

HTML复选框元素

HTML中复选框元素的代码如下所示：

<input type="checkbox" id="myCheckbox">

其中，type="checkbox" 表示这个元素是一个复选框，id="myCheckbox"为这个元素指定一个ID.

我们可以把该复选框放在某一HTML页面中，然后加上标签，使用户可以看到并勾选它。

JavaScript代码

一旦用户点击勾选此复选框，我们需要使用JavaScript代码检测是否勾选，并据此展示或隐藏某个表单。

<script>
  function showForm() {
    var checkbox = document.getElementById("myCheckbox");
    if (checkbox.checked) {
      document.getElementById("myForm").style.display = "block";
    } else {
      document.getElementById("myForm").style.display = "none";
    }
  }
</script>

我们在script标签中定义了函数showForm()，调用该函数时，将获取所勾选复选框的状态，并据此设置表单的显示方式。

在HTML中，我们可以定义一个表单并为其设置一个ID，如下所示：

<form id="myForm">
  <!-- 表单中的输入字段 -->
</form>

当用户点击勾选复选框后，就可以展示出这个表单。

总结

通过使用HTML中的复选框元素和JavaScript的展示和隐藏属性，我们可以实现“如果选中复选框打开表单”的功能。

完整的HTML代码片段如下：

<input type="checkbox" id="myCheckbox" onclick="showForm()">
<form id="myForm" style="display: none;">
  <!-- 表单中的输入字段 -->
</form>

<script>
  function showForm() {
    var checkbox = document.getElementById("myCheckbox");
    if (checkbox.checked) {
      document.getElementById("myForm").style.display = "block";
    } else {
      document.getElementById("myForm").style.display = "none";
    }
  }
</script>