复选框上的 Javascript 事件监听器

Question

我正在尝试根据按钮单击(“发送电子邮件”或“取消”)隐藏/显示复选框。按钮隐藏显示有效，但我还向复选框添加了一个事件监听器，以将按钮文本更改为“确认”(如果任何复选框处于事件状态)。复选框注册为“已选中”时似乎存在延迟，我想不出或找到更好的方法来检查它。任何帮助将不胜感激!

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变量包含 radio 标签的集合:

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