复选框上的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示例

里克·希区柯克

您的radios变量包含单选标签的集合:

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

单击标签后,将实际更改输入值之前click触发事件

我通常建议将输入内容放在其标签内。但是,您有很多input + labelCSS可能会损坏,而我不知道您可能还有哪些其他代码也可能会损坏。

给定当前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";
      }
    });
  }
)

工作小提琴

本文收集自互联网,转载请注明来源。

如有侵权,请联系 [email protected] 删除。

编辑于
0

我来说两句

0 条评论
登录 后参与评论

相关文章