我試圖根據點擊按鈕('發送電子郵件'或'取消')來隱藏/顯示覆選框。按鈕隱藏顯示的作品,但我也添加了一個事件監聽器複選框,以改變按鈕文本'確認',如果任何複選框被激活。當複選框註冊爲「已檢查」時,似乎有延遲,我無法想到或找到更好的方法來檢查它。任何幫助將不勝感激!複選框上的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>
請至少清理你的代碼的一些格式。 – xiaoyi