チェックボックスのJavascriptイベントリスナー

Question

ボタンクリック（「メール送信」または「キャンセル」）に基づいてチェックボックスを非表示または表示しようとしています。 button hide showは機能しますが、チェックボックスにイベントリスナーを追加して、チェックボックスがアクティブな場合にボタンテキストを「確認」に変更しました。チェックボックスが「チェックされた」と登録され、それをチェックするより良い方法を考えることができない、またはそれを見つけることができないということが遅れているようです。どんな助けでも大歓迎です！

var checker = document.getElementById("emailer"); 
 
var radios = document.querySelectorAll(".radioEmail+label"); 
 

 
for (var i=0; i<radios.length; i++){ 
 
    radios[i].addEventListener('click', function(){ 
 
    var checkingChecks = document.querySelectorAll(".radioEmail:checked").length; 
 
    if (checkingChecks > 0) { 
 
     document.getElementById("emailer").className="confirm"; 
 
    } 
 
    else { 
 
     document.getElementById("emailer").className="cancel" 
 
    } 
 
    } 
 
)}; 
 
    
 
    
 
document.getElementById("emailer").addEventListener('click', function(){ 
 
    if (checker.getAttribute('class')=='emailer'){ 
 
     checker.className = "cancel"; 
 
    for(var i = 0;radios.length>i;i++) { 
 
     radios[i].style.display="inline-block" 
 
    } 
 
    } 
 
    else if (checker.getAttribute('class')=='cancel') { 
 
    for(var i = 0;radios.length>i;i++) { 
 
     radios[i].style.display="none" 
 
    } 
 
    checker.className="emailer"; 
 
    } 
 
});

input[type=checkbox].radioEmail + label{display:none} 
 
.emailer:after{content:"Send Mass Email";} 
 
    .confirm:after{content:"confirm"} 
 
    .cancel:after{content:"cancel"} 
 
input[type=checkbox] + label{ 
 
    cursor:pointer; 
 
    width  : 1em; 
 
    font-size : 0.875em; 
 
    line-height : 1em; 
 
    color  : white; 
 
    text-align : center; 
 
    font-weight : bold; 
 
    height   : 1em; 
 
    margin   : 0.25em 0.5em 0.25em 0.25em; 
 
    border   : 0.0625em solid #000066; 
 
    border-radius : 0.25em; 
 
    background  : white; 
 
    vertical-align : bottom; 
 
    transition: ease-in-out 0.3s; 
 
    -webkit-transition: ease-in-out 0.3s;} 
 
    input[type=checkbox].radioEmail + label{display:none} 
 
input[type=checkbox]:checked + label{background:#000066} 
 
input[type=checkbox]:checked + label:before{content: '✓'} 
 
input:hover + label{background:rgba(0,0,102,0.5)} 
 
input[type=checkbox]{ 
 
    width  : 2em; 
 
    margin : 0; 
 
    padding : 0; 
 
    font-size : 1em; 
 
    opacity : 0;}

<button id = "emailer" class='emailer' ></button> 
 
    <input class="radioEmail" id="option" type="checkbox" name="field" value="option"> 
 
    <label for="option"></label> 
 

 
    <input class="radioEmail" id="option2" type="checkbox" name="field" value="option"> 
 
    <label for="option2"></label>

jsfiddle example

Answer 1

はあなたのradios変数は、無線ラベルのコレクションが含まれています

ラベルがクリックされた

var radios = document.querySelectorAll(".radioEmail+label"); 

、clickイベントが発生したの前に、の入力値が実際に変更されます。

普通は入力をのラベルに入れておくことをおすすめします。しかし、あなたは多くのinput + label CSSを壊してしまいます。私は他のどのコードが壊れているかも知れません。あなたの現在のHTMLとCSS与え

迅速な解決をsetTimeout()内のラジオボタンをチェックすることです：

radios[i].addEventListener('click', 
    function() { 
    setTimeout(function() { 
     var checkingChecks = document.querySelectorAll(".radioEmail:checked").length; 
     if (checkingChecks > 0) { 
     checker.className = "confirm"; 
     } else { 
     checker.className = "cancel"; 
     } 
    }); 
    } 
) 

Working Fiddle

Answer 2

<input type="checkbox" id="the_box" /> 

$(document).ready(function(){ 
    %('#the_box').on('change', function(){ 
     if ($(this).is(':checked')){ 
      //checkbox is checked, do something 
      } 

    }) 


})