Флажок проверен, требуется ввод, если флажок снят, вход не требуется

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

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

Answer 2

Вы можете провести l oop через каждого дочернего элемента и установить для его атрибута 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>