javascript - 输入字段出现在默认选中的选择框上

Question

我正在开发一个表单，我们可以选择将产品分配给对象(在本例中为用户)。根据在代码中检索和使用的数据库中给出的值，默认情况下，该用户可能拥有这些特定产品之一。

if($Pants=="1"){
   echo "<input type='checkbox' onclick='PantsInput(this);' checked>Pants<br>";
}
else {
   echo "<input type='checkbox'> Pants<br>";
}

如果选中该复选框，有一些 JavaScript 会创建一个文本输入字段。它有效，但只有当我继续手动选择它时才有效。

我想要完成的是让脚本识别该复选框是否已选中。仍然可以手动执行此操作，但如果已选中该复选框，则字段在加载时显示会很棒。

这是脚本:

function PantsInput(cbox) {
      if (cbox.checked) {
        var input = document.createElement("input");
        input.type = "text";
        input.value = "1";
        input.name = "AmountPants"
        var div = document.createElement("div");
        div.id = cbox.name;
        div.innerHTML = "Amount of pants: ";
        div.appendChild(input);
        document.getElementById("pantsinput").appendChild(div);
      } else {
        document.getElementById(cbox.name).remove();
      }
    }

这是一个 JSFiddle，它显示了我正在努力解决的问题: https://jsfiddle.net/orqweyzc/

该框已被选中，但只有当您继续并自行取消选中并再次选中时，该字段才会出现。我尝试了一些不同的 DOM 事件，但似乎无法做到。

Answer 1

你可以做这样的事情

window.addEventListener('load', function() {
  var inputs = document.querySelectorAll('input');
  
  for (var i = 0; i < inputs.length; i++) {
    
    switch (inputs[i].getAttribute("data-type")) {
        
      case 'pants':      
      case 'shirts':
        inputs[i].addEventListener('click', function(e) {
          if (e.target.checked) {
            addElement(e.target);
          } else {
            document.getElementById(e.target.name).remove();
          }
        })
        
        if (inputs[i].checked) {
          addElement(inputs[i]);
        }
        break;
        
    }
  }
})

function addElement(t) {
  var vals = t.getAttribute('data-text').split('|');
  var input = document.createElement("input");
  input.type = "text";
  input.value = vals[0];
  input.name = vals[1];
  var div = document.createElement("div");
  div.id = t.name;
  div.innerHTML = vals[2];
  div.appendChild(input);
  document.getElementById(vals[3]).appendChild(div);
}

<p>Clothing</p>
<input type="checkbox" name="check1" checked data-type="pants" 
       data-text="1|AmountPants|Amount of pants: |pantsinput" />Pants
<br>
<input type="checkbox" name="check2" data-type="shirts" 
       data-text="2|AmountShirts|Amount of shirts: |shirtinput" />Shirt
<br>

<p id="pantsinput"></p>
<p id="shirtinput"></p>