立即检测正在检查的输入

Question

假设我有一个类型为“复选框”的输入

<input type='checkbox' id='checker'>

我需要能够立即检测是否选中了此框，而无需单击按钮或调用函数。选中和取消选中该框将使文本变亮或变暗。如何在 VANILLA JAVASCRIPT 中不断检查该框是否未选中？我需要能够做到这一点，最好没有会导致页面崩溃的无限 for 循环。我知道它的方法

var value=document.getElementById('checker').checked;

但我需要一种方法来不断查看它是否已被检查，而无需使用 vanilla javascript 重新加载页面。请帮忙！

编辑：我也在考虑使用两个单选按钮，一个值为真，另一个值为假，但我仍然需要一种方法来查看哪个单选按钮被选中。

Answer 1

查看工作演示：http://jsfiddle.net/rrath8tg/1/:

// checkbox is a reference to the element
checkbox.onchange = function() {
     if(this.checked) {
         // do something when checked
     }
};

或onchange 在复选框元素上。

Answer 2

您可以只使用 CSS，前提是您要更改的文本位于 DOM 中的同一级别：

HTML：

<input type="checkbox" id="checker">
<span id="sometext">Lorem ipsum...</span>

CSS：

input#checker:checked + span#sometext {
    color:#ff0000; /* Red - highlighted */
}

Answer 3

事件监听器和事件委托会帮助你

document.addEventListener('click', function(e) {
  if (e.target.nodeName == 'INPUT' && e.target.type == 'checkbox' && e.target.checked) {
    alert('Checked!');
  }
});

<input type="checkbox" />

• e.target.nodeName 返回被点击元素的标签名
• e.target.type 返回其类型
• e.target.checked 返回点击的元素是否被选中

适用于页面上的所有复选框（您也可以检查e.taget.id是否有正确的复选框）。

---

使用单选按钮的示例

在这种情况下，change 事件监听器更合适，因为您可以单击单选按钮而不更改它。

document.addEventListener('change', function(e) {
  if (e.target.nodeName == 'INPUT' && e.target.type == 'radio' && e.target.checked) {
    alert(e.target.id); // returns either `yes` or `no`.
  }
});

<label><input id="yes" name="radio0" type="radio" />Yes</label>
<label><input id="no" name="radio0" type="radio" />No</label>

---

为什么是事件委托？

如果您将事件侦听器附加到 document 而不是特定的 input，则有几个优点：

• 无需将所有代码包装在addEventListener('DOMContentLoaded',function(){}) 或类似的东西中。没关系，内容是否已加载，此事件也会触发并始终提供正确的目标。
• 它适用于任意数量的输入框。您无需将事件侦听器绑定到每个输入框。

不过，它有点先进。如果你想改变输入框旁边的元素，无论哪个输入框被点击，你都必须用nextElementSibling, previousElementSibling, parentNode, @ 987654338@等