单选按钮检查香草js时显示div答案

【问题标题】：Show div when radio button checked vanilla js单选按钮检查香草js时显示div
【发布时间】：2016-05-09 01:56:57
【问题描述】：

这里有点挣扎。我的事件监听器只检测到我的单选按钮的“已检查”更改，而不是“未检查”更改。注意：只有纯 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);

  });

 })();

【问题讨论】：

您仅在单个输入中具有 data-show-more 属性。请注意，编程更改不会触发事件。
@Teemu 我只想检查第一个单选按钮是否更改。我不做任何编程更改，我只是听（本机）更改事件？还是我错了？
@Teemu Aha 好的，不知道这实际上是一个程序更改。现在更有意义了。我不想将它包装到任何额外的元素中。我会先尝试一些额外的数据属性。
注意，你也可以监听form元素的变化。虽然这需要在处理程序中进行更多过滤以识别您实际想要收听的单选按钮组。

标签： javascript forms radio-button

【解决方案1】：

这样做的简单方法是监听选中的事件和名称为 radio 的所有单选按钮

(function() {
  "use strict";

    document.querySelector("#radio1").addEventListener("change", function() {
        alert("checked radio 1");
    });

    document.querySelector("#radio2").addEventListener("change", function() {
        alert("checked radio 2");
    });

})();

【讨论】：

是的，但是您在这里通过元素 ID 进行检查 :-)
@funder7 选择器无关紧要，您可以通过您想要的任何特定选择器来定位您的输入。
是的，我知道，但是您已经编写了“...所有带有 name 收音机的单选按钮”。我无意听起来“挑剔”，但 ID 和名称是两个独立的东西，两者都可以用作选择器。
@funder7 这不是关于选择器，而是关于以任何你想要的方式获取所有具有相同名称的无线电输入