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

您的<select ref="datechosen" id="datechosen" onChange=updatedate()> <option value="dec2016">December 2016</option> <option value="nov2016">November 2016</option> <option value="oct2016">October 2016</option> </select> <div id='dec2016' class='month'> DEC </div> <div id='oct2016' class='month'> OCT </div> <div id='nov2016' class='month'> NOV </div>变量包含一系列广播标签：

radios

点击标签后，输入值实际发生变化之前，触发var radios = document.querySelectorAll(".radioEmail+label");事件。

我通常建议将输入放在标签中。但是，你有很多click CSS会破坏，而且我也不知道你可能会遇到的其他代码也可能会破坏。

根据您当前的HTML和CSS，快速解决方案是检查setTimeout()中的单选按钮：

input + label

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
           }

   })


})

复选框上的Javascript事件监听器

2 个答案: