文本框不通过复选框单击隐藏（javascript）

Question

我有一个文本框，如果未选中复选框，我希望在单击复选框时显示该文本框并消失，但是我的代码当前在页面加载时显示文本框，但是一旦您选择然后取消选择复选框，它就会消失应该的。有什么想法吗？

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

是的，简单，添加你想要的样式作为默认样式，例如，你想要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;" />

Answer 2

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

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

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

一旦页面加载，此功能将隐藏文本框。