Показать div, когда радиокнопка проверена ванилью js

Question

Немного борьбы здесь. Мой eventlistener обнаруживает только «проверенное» изменение моего переключателя, а не «непроверенное» изменение. Примечание. Только чистый 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); 

    }); 

})(); 

Answer 1

Легкий способ сделать это, это слушать проверил СОБЫТИЕ все радио кнопки с названием радио

(function() { 
    "use strict"; 

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

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

})();