我试图基于按钮单击(“发送电子邮件”或“取消”)隐藏/显示复选框。按钮隐藏显示有效,但是我还向复选框添加了一个事件侦听器,以将按钮文本更改为“确认”(如果有任何复选框处于活动状态)。复选框被注册为“已选中”时似乎有一个延迟,我想不出或找不到更好的方法来对其进行检查。任何帮助将不胜感激!
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>
您的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";
}
});
}
)
本文收集自互联网,转载请注明来源。
如有侵权,请联系 [email protected] 删除。
我来说两句