单击JavaScript时未选中复选框_Javascript_Html_Checkbox_Innerhtml

单击JavaScript时未选中复选框

javascript html checkbox

单击JavaScript时未选中复选框,javascript,html,checkbox,innerhtml,Javascript,Html,Checkbox,Innerhtml,我试图在单击复选框时添加一个输入字段，我希望复选框被选中（这是它的默认行为！），但即使在输入字段出现后，复选框也不会被选中。下面是我用JavaScript编写的HTML代码功能检查\u测试（）{ if（document.contains（document.getElementById（“测试输入”））{ document.getElementById（“测试输入”）.remove（）； } document.getElementById（“test_div”）.innerHTML+=“”；

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

功能检查\u测试（）{
if（document.contains（document.getElementById（“测试输入”））{
document.getElementById（“测试输入”）.remove（）；
}
document.getElementById（“test_div”）.innerHTML+=“”；
}

您正在使用类似的innerHTML覆盖复选框所在的同一个div的内容。使用第二个div，或者使用create元素并附加子元素，而不是替换整个内容

这很有效

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


功能检查测试（）{
if（document.contains（document.getElementById（“测试编号”））{
document.getElementById（“测试编号”）.remove（）；
}
document.getElementById（“test_div”）.innerHTML+=“”；
}

您可以使用：

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

document.getElementById（“test_div”）.insertAdjacentHTML（“afterend”，“afterend”）；

而不是：

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

document.getElementById（“test_div”）.innerHTML+=“”；

不是最好的解决办法；然而，它工作起来非常简单。然后，您只需使用CSS样式设置页面的其余部分。

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

function check_test(e)

然后调用

e进行检查位于函数的顶部或底部
让我知道这是否有效。
通过手机应答，因此我无法测试自己。
通过执行+=您正在覆盖上一个复选框。
您正在有条件地删除\test\u输入，如果它存在于DOM中，但在添加它时您没有使用else
。因此，无论您处于哪种状态，在结束函数时都会将输入添加到DOM中
正如其他人所提到的，当您在innerHTML上+=
时，实际上是在创建一个全新的字符串，从而将原始复选框重新初始化为unchecked
您可能只想将一个新的子项附加到包装器中。我还使用了onchange
事件，这样无论单击复选框还是通过编程方式选中复选框，它都可以执行您想要的操作

功能检查\u测试（复选框）{
const checked=checkbox.checked；//是否选中？
const testInput=document.getElementById（“测试输入”）；//测试输入元素
//如果它被选中并且没有输入，则添加它
如果（已检查和测试输入）{
const newInput=document.createElement（'input'）；
newInput.type='text'；
newInput.name='test_input'；
newInput.id='test_input'；
checkbox.parentNode.appendChild（newInput）；
}
//否则，如果未选中，并且DOM中存在输入，则将其删除
否则，如果（！选中并测试输入）{
document.getElementById（“测试输入”）.remove（）；
}
}
使用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>


功能检查测试（）{
var testdiv=document.getElementById（“test_div”）；
如果（！document.contains（document.getElementById（“测试编号”））{
var newInput=document.createElement（'input'）；
newInput.id='测试编号'；
testdiv.appendChild（newInput）；
}否则{
document.getElementById（“测试编号”）.remove（）；
}
}

相关的：
让我解释一下：通过执行innerHTML+=”