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";
     }
    }

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

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>

Answer 2


//element.setAttribute("required", "");    turns required on
//element.removeAttribute("required");     turns required off


function unlocking() {
    var checkBox = document.getElementById("check")
    var form = document.getElementById("unlock")
    var inputs = document.querySelectorAll('input[type=text]')

    if(checkBox.checked) {
       form.style.display="block";
       for(var i = 0; i < inputs.length; i++)
       inputs[i].setAttribute("required", "");
    }else {
       form.style.display="none";
       for(var i = 0; i < inputs.length; i++)
       inputs[i].removeAttribute("required");
    }
}

复选框选中的输入是必需的，如果复选框未选中，则不需要输入

2 个答案: