复选框未选中 onclick JavaScript答案

【问题标题】：Checkbox not checked onclick JavaScript复选框未选中 onclick JavaScript
【发布时间】：2020-01-03 19:43:05
【问题描述】：

我正在尝试在单击复选框时添加一个输入字段，并且我希望选中该复选框（这是它的默认行为！），但即使在输入字段出现后该复选框也不会被选中。以下是我使用 JavaScript 编写的 HTML 代码。

function check_test() {
  if (document.contains(document.getElementById("test_input"))) {
    document.getElementById("test_input").remove();
  }
  document.getElementById("test_div").innerHTML += "<input type='text' name='test_input' id='test_input'/>";
}

<div id="test_div">
  <input type="checkbox" name="test_checkbox" id="test_checkbox" onclick="check_test()" />
</div>

我也在 JsFiddle 中试过这个，它给出了同样的错误，我不确定我做错了什么。

https://jsfiddle.net/1yLb70og/1/

【问题讨论】：

标签： javascript html checkbox innerhtml

【解决方案1】：

您正在使用类似的 innerHTML 覆盖复选框所在的同一 div 的内容。使用第二个 div，或者使用 create element 和 append child 而不是替换整个内容。

这行得通。

<html>
  <div id="test_div1">
  <input type="checkbox" name="test_checkbox" id="test_checkbox" onclick="check_test()"/>
  </div>
  <div id="test_div"></div>
  <script>
    function check_test() {
      if(document.contains(document.getElementById("test_number"))) {
        document.getElementById("test_number").remove();
      }
      document.getElementById("test_div").innerHTML += "<input type='number' name='test_number' id='test_number'/>";
    }
  </script>
</html>

【讨论】：

【解决方案2】：

如果 #test_input 存在于 DOM 中，您将有条件地删除它，但添加时您没有使用 else。因此，无论您处于哪种状态，都将始终以将输入添加到 DOM 来结束函数。

正如其他人所提到的，当您在 innerHTML 上+= 时，您实际上是在创建一个全新的字符串，从而将您的原始复选框重新初始化为未选中。

您可能只想将一个新子级附加到包装器中。我还使用了onchange 事件，这样无论是通过单击还是以编程方式选中该框，它都会执行您想要的操作。

function check_test(checkbox) {
  const checked = checkbox.checked; // is it checked?
  const testInput = document.getElementById("test_input"); // test_input element
  
  // if it's checked and doesn't have an input, add it
  if (checked && !testInput) {
    const newInput = document.createElement('input');
    newInput.type = 'text';
    newInput.name = 'test_input';
    newInput.id = 'test_input';
    checkbox.parentNode.appendChild(newInput);
  }
  // otherwise, if it's not checked and there is an input in the DOM, remove it
  else if (!checked && testInput) {
    document.getElementById("test_input").remove();
  }
}

<div id="test_div">
  <input type="checkbox" name="test_checkbox" id="test_checkbox" onchange="check_test(event.target)" />
</div>

【讨论】：

【解决方案3】：

通过 += 你覆盖了之前的复选框。

【讨论】：

让我解释一下：通过执行 innerHTML += "

【解决方案4】：

你可以使用：

document.getElementById("test_div").insertAdjacentHTML("afterend", "<input type='text' name='test_input' id='test_input'/>");

代替：

document.getElementById("test_div").innerHTML += "<input type='text' name='test_input' id='test_input'/>";

不是最好的解决方案；但是，它可以工作并且非常简单。然后，您只需使用 CSS 样式修复页面的其余部分。

【讨论】：

【解决方案5】：

尝试在函数声明中添加事件：

function check_test(e)

然后在函数的顶部或底部调用e.checked;。

让我知道这是否有效。用我的手机接听，所以我无法测试自己。

【讨论】：

【解决方案6】：

当使用innerHTML时，元素的所有事件都会被取消。

你需要使用 DOM 函数。

<html>
<div id="test_div">
    <input type="checkbox" name="test_checkbox" id="test_checkbox" onchange="check_test()" />
</div>
<script>
    function check_test() {
        var testdiv = document.getElementById("test_div");
        if (!document.contains(document.getElementById("test_number"))) {

            var newInput = document.createElement('input');
            newInput.id = 'test_number';
            testdiv.appendChild(newInput);
        }else{
            document.getElementById("test_number").remove();
        }
    }

</script>

</html>

【讨论】：