複選框上的Javascript事件監聽器

我試圖根據點擊按鈕（'發送電子郵件'或'取消'）來隱藏/顯示覆選框。按鈕隱藏顯示的作品，但我也添加了一個事件監聽器複選框，以改變按鈕文本'確認'，如果任何複選框被激活。當複選框註冊爲「已檢查」時，似乎有延遲，我無法想到或找到更好的方法來檢查它。任何幫助將不勝感激！複選框上的Javascript事件監聽器

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

來源

2016-11-08 Silverstaryu

請至少清理你的代碼的一些格式。 – xiaoyi

你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

來源

2016-11-08 21:28:16

這對我有效！非常感謝你提供有關標籤和輸入點擊事件順序的信息。我真的不知道這個命令。 – Silverstaryu

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

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

    }) 


})

來源

2016-11-08 21:06:24 rob

複選框上的Javascript事件監聽器

回答

相關問題