Javascript 根据复选框状态更改输入字段属性时出现问题

我正在使用一个复选框来显示包装在div中的一些输入字段。单击该复选框时，div显示正确，而未单击时，divs隐藏工作正常。默认情况下，div中的输入字段不是必需的（可选）

我想创建一个Js逻辑，如果用户单击复选框，字段应该将属性更改为强制/必需

我是Js学习者，请协助

用于隐藏或重新显示下面div的复选框代码

<label class="spouse-me">
    <h1 class="pumba">Spouse</h1>
    <input type="hidden" class="spouse" value="0" />
    <input type="checkbox" id="spouse" value="1" class="spouse" onclick="checkMark()">
</label>

---

也许你可以试试这样的东西

  if (checkBox.checked == true){
    text.style.display = "block";
    var inputElm = document.getElementsByTagName(INPUT);
    for(var i=0; i<inputElm.length; i++) {
        inputElm[i].required = true;
    }
  } else {
    text.style.display = "none";
  }

if（checkBox.checked==true）{
text.style.display=“块”；
var inputElm=document.getElementsByTagName（输入）；
for（var i=0；iwhy使用for循环？getElementsByTagName返回输入元素的集合。您可以对其进行迭代以将所有输入字段标记为“必需”。
  function checkMark() {
      var checkBox = document.getElementById("spouse");
      var text = document.getElementById("spouseDetail");

      // If the checkbox is checked, display the output text
      if (checkBox.checked == true){
        text.style.display = "block";
      } else {
        text.style.display = "none";
      }
    }

  if (checkBox.checked == true){
    text.style.display = "block";
    var inputElm = document.getElementsByTagName(INPUT);
    for(var i=0; i<inputElm.length; i++) {
        inputElm[i].required = true;
    }
  } else {
    text.style.display = "none";
  }