这里有点挣扎。我的事件侦听器仅检测到单选按钮的“已选中”更改,而不是“未选中”更改。注意:仅纯 javascript (vanillajs),无 jQuery。
用一点 JSFiddle 来解释我的问题:https://jsfiddle.net/kLuba37w/1/
<label class="checkbox checkbox--block">
<input type="radio" name="radio" class="" data-show-more data-target="showmoretarget2" value="1"> <span></span> This is the first radio
</label>
<label class="checkbox checkbox--block">
<input type="radio" name="radio" class="" value="2"> <span></span> This is the second radio
</label>
<div class="js-show-more" data-hook="showmoretarget2">
<h2 class="h2"> Some more content</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Blanditiis ipsum repellendus, officia dolores consectetur. Error at officiis sequi iure earum.</p>
</div>
JS:
(function() {
"use strict";
var elements = document.querySelectorAll('[data-show-more]');
[].forEach.call(elements, function(element) {
element.addEventListener('change', function(e) {
e.preventDefault();
var target = document.querySelectorAll('[data-hook="' + this.getAttribute('data-target') + '"]')[0];
alert("change detected");
}, false);
});
})();
执行此操作的简单方法是监听选中的事件和名称为 radio 的所有单选按钮
(function() {
"use strict";
document.querySelector("#radio1").addEventListener("change", function() {
alert("checked radio 1");
});
document.querySelector("#radio2").addEventListener("change", function() {
alert("checked radio 2");
});
})();
document.getElementsByName('radio-button').forEach(function(element) {
element.onclick = function() {
alert("change detected");
}
});
<fieldset>
<div>
<input type="radio" name="radio-button" id="button1" value="1" checked>
<label for="button1">This is the first radio</label>
</div>
<div>
<input type="radio" name="radio-button" id="button2" value="2">
<label for="button2">This is the second radio</label>
</div>
</fieldset>