单击复选框时文本框未隐藏 (javascript)

Question

我有一个文本框，我希望它出现在复选框上，如果该复选框未被select编辑，点击它就会消失，但是我的代码目前在页面加载时显示该文本框，但是一旦您 select 然后 unselect 复选框就会按预期消失。有什么想法吗？

Javascript:

function TMDFunction() {
  // Get the checkbox
  var checkBox = document.getElementById("tmd_checkbox");
  // Get the output text
  var text = document.getElementById("test");

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

<input type="checkbox" class="product" name="targetedmobiledisplay" value="0.08" id="tmd_checkbox" onclick="TMDFunction()">
Targeted Mobile Display
<br> 
Test: <input id="test" type="text" value="0.00" data-total="0" />

Answer 1

TMDFunction() 仅在单击复选框时运行。最初加载页面时，不会调用该函数。

您可以尝试在 document.ready 页面加载时隐藏文本框。

$( document ).ready(function() {
   var text = document.getElementById("test");
  test.style.display = 'none';
});

此函数将在页面加载后隐藏文本框。

Answer 2

嗯，很简单，添加你想要的默认样式，比如你想要display: none，那么就插入到HTML。

function TMDFunction() {
  // Get the checkbox
  var checkBox = document.getElementById("tmd_checkbox");
  // Get the output text
  var text = document.getElementById("test");

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

<input type="checkbox" class="product" name="targetedmobiledisplay" value="0.08" id="tmd_checkbox" onclick="TMDFunction()"> Targeted Mobile Display
<br> 
Test: 
<input id="test" type="text" value="0.00" data-total="0" style="display:none;" />

单击复选框时文本框未隐藏 (javascript)

textbox not hiding with checkbox click (javascript)

html

javascript

checkbox

jquery

textbox