单击时未选中复选框 JavaScript

Question

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

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/

Answer 1

您正在覆盖复选框所在的相同 div 的内容，使用 innerHTML 之类的。使用第二个 div，或使用创建元素并追加子元素而不是替换整个内容。

这有效。

<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>

Answer 2

您可以使用：

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 样式来修复页面的其余部分。

Answer 3

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

function check_test(e)

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

如果可行，请告诉我。从我的 phone 回答所以我无法测试自己。

Answer 4

通过执行 +=，您将覆盖之前的复选框。

Answer 5

如果 #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>

Answer 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>

单击时未选中复选框 JavaScript

Checkbox not checked onclick JavaScript

html

javascript

checkbox

innerhtml