Question

假设我输入的类型为＆＃34;复选框＆＃34;

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

我需要能够在没有按钮点击或功能调用的情况下立即检测此框是否被选中。选中并取消选中该框将使文本变亮或变暗。我如何不断检查盒子是否未经检查IN VANILLA JAVASCRIPT？我需要能够做到这一点，最好没有无限的for循环，这会使页面崩溃。我知道它的方法

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

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

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

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，{ {1}}，parentNode等

立即检测正在检查的输入

3 个答案:

事件监听器和事件委托将帮助您

使用单选按钮的例子

为什么选择事件？