未选中复选框时如何更改标签标签的文本

Question

取消选中复选框后，我无法更改标签的文本。

在此先感谢您的帮助。

var checkBox_fruit = document.getElementById("fruit");
var label_fruit = document.getElementById("label_fruits");

checkBox_fruit.addEventListener('change', function() {
      if (this.checked) {
        // Checkbox is checked..

        label_fruit.innerHTML = " fruits 1"; ////// its that who works

      } else {
        // Checkbox is not checked..

        label_fruit.innerHTML = " fruits 2"; ////// its that who not works

      }

Answer 1

您的代码工作正常，您只是忘记添加右括号}); .

请参阅演示。

 var checkBox_fruit = document.getElementById("fruit"); var label_fruit = document.getElementById("label_fruits"); checkBox_fruit.addEventListener('change', function() { if (this.checked) { // Checkbox is checked.. label_fruit.innerHTML = " fruits 1"; ////// its that who works } else { // Checkbox is not checked.. label_fruit.innerHTML = " fruits 2"; ////// its that who not works } });

 <input type="checkbox" id="fruit" /> <label id="label_fruits"></label>

Answer 2

您只需要在最后关闭一些}) 。

 var checkBox_fruit = document.getElementById("fruit"); var label_fruit = document.getElementById("label_fruits"); checkBox_fruit.addEventListener('change', function () { if (this.checked) { // Checkbox is checked.. label_fruit.innerHTML = " fruits 1"; ////// its that who works } else { // Checkbox is not checked.. label_fruit.innerHTML = " fruits 2"; ////// its that who not works } });

 <input type='checkbox' id='fruit'> <label id='label_fruits'>Fruit</label>