javascript - 复选框选中输入需要，如果复选框未选中则不需要输入

Question

这是我的html

    <input type="checkbox" name="checked" id="check" onclick="unlocking()">
    <label for="checkbox">If checked</label>
    <fieldset id="unlock" style="display:none;">
        <input type="text" name="Name" value="Name" id="inside" required>
        <input type="text" name="email" value="email" id="inside" required>
        <input type="text" name="Adress" value="Adress" id="inside" required>
      </fieldset>

这是我的 js，具有隐藏和显示字段集的功能。

    function unlocking() {
      var checkBox = document.getElementById("check")
      var form = document.getElementById("unlock")

      if(checkBox.checked) {
       form.style.display="block";
      }else {
       form.style.display="none";
     }
    }

如果显示字段集，我希望输入是必​​需的，如果不只是跳过它。

标签： javascripthtml

Answer 1

您可以遍历每个孩子并将其required属性设置为true或false取决于复选框是否被选中，如下所示：

for (child of form.children) {
  child.required = true;
}

请检查以下片段：

function unlocking() {
  var checkBox = document.getElementById("check");
  var form = document.getElementById("unlock");

  if (checkBox.checked) {
    form.style.display = "block";
    for (child of form.children) {
      child.required = true;
      console.log(child);
    }
  } else {
    form.style.display = "none";
    for (child of form.children) {
      child.required = false;
      console.log(child);
    }
  }
}

<input type="checkbox" name="checked" id="check" onclick="unlocking()" />
<label for="checkbox">If checked</label>
<fieldset id="unlock" style="display: none;">
  <input type="text" name="Name" value="Name" id="inside" />
  <input type="text" name="email" value="email" id="inside" />
  <input type="text" name="Adress" value="Adress" id="inside" />
</fieldset>