javascript - 选中复选框时使用 innerHTML 添加的文本在未选中时不删除

Question

当您选中复选框时，我试图使文本“是的，我喜欢 F1”出现在 id="print-f1"的 div 中，这是有效的。

但是，当您取消选中该复选框时，文本不会消失。

我还注意到，如果我在 HTML 中将复选框默认设置为选中，它也不会在加载页面时将“是的，我喜欢 F1”添加到 id="print-f1"div。

我没有使用 innerHTML = ''; 来删除文本，因为 I read using removeChild is much more efficient .

我还将输入中输入的任何名称添加到第一个灰色 div 中，其中 id="print-name"该部分正在工作。

https://jsfiddle.net/r8qbfdmy/

JS

function myForm() {
  var nameForm = document.forms.nameform;
  var printF1 = document.getElementById('print-f1');

  nameForm.name.onkeyup = function() {
    document.getElementById('print-name').innerHTML = nameForm.name.value;
  };

  nameForm.likef1.addEventListener("focus", printF1func)

  function printF1func() {
    if (printF1.checked === false) {
      while (printF1.firstChild) printF1.removeChild(printF1.firstChild);
    } else {
      printF1.innerHTML = nameForm.likef1.value;
    };
  };

};
myForm();

HTML

<form name="nameform">
  <input name="name" class="form__input rounded-4" placeholder="Enter your name">
  <label>
    <input type="checkbox" name="likef1" value="Yes, I like F1"> Do you like F1?
  </label>
  <div id="print-name" class="rounded-4"></div>
  <div id="print-f1" class="rounded-4"></div>
</form>

CSS

.rounded-4 {
  -webkit-border-radius: 4px;
  -moz-border-radius: 4px;
  border-radius: 4px;
}

.form__input {
  border-width: 2px;
  border-style: solid;
  border-color: #989898;
  width: 200px;
  line-height: 40px;
  color: #989898;
  padding: 0 12px;
  font-size: 16px;
  outline: none;
  margin: 20px;
}

#print-name {
  background-color: #989898;
  width: 200px;
  line-height: 40px;
  height: 40px;
  color: #fff;
  padding: 0 12px;
  font-size: 16px;
  outline: none;
  margin: 0 20px;
}

#print-f1 {
  background-color: #989898;
  width: 200px;
  line-height: 40px;
  height: 40px;
  color: #fff;
  padding: 0 12px;
  font-size: 16px;
  outline: none;
  margin: 20px;
}

Answer 1

替换这个...

nameForm.likef1.addEventListener("focus", printF1func)

function printF1func() {
    if (printF1.checked === false) {
        while (printF1.firstChild) printF1.removeChild(printF1.firstChild);
    } else {
        printF1.innerHTML = nameForm.likef1.value;
    };
};

...有了这个...

nameForm.likef1.addEventListener("change", printF1func);

function printF1func() {
    if (nameForm.likef1.checked) {
        printF1.innerHTML = nameForm.likef1.value;
    } else {
        printF1.innerHTML = '';
    }
};

... 它应该可以正常工作。

另见 this Fiddle用于演示。

---

注意事项:

在这种特殊情况下，我严重怀疑在使用 printF1.removeChild(printF1.firstChild); 而不是 printF1 时，您是否会获得很大的性能提升(如果有的话) .innerHTML = '';

但是，如果您坚持使用 printF1.removeChild(printF1.firstChild);，请注意您可以放弃 while 循环，因为 printF1 始终只有一个每次执行时的 child :

nameForm.likef1.addEventListener("change", printF1func);

function printF1func() {
    if (nameForm.likef1.checked) {
        printF1.innerHTML = nameForm.likef1.value;
    } else {
        printF1.removeChild(printF1.firstChild);
    }
};

另见 this Fiddle用于演示。