我需要在选中所有输入复选框后向元素添加一个类,而无需单击提交按钮。我宁愿不让 jQuery 参与进来,因为这将是页面上唯一的 javascript 元素。这是我到目前为止所拥有的,看起来它是在第一次单击复选框后添加类,这不是我想要的。
JS
function showMe (box) {
var checkbox = document.getElementsByName("selectPlant");
for(var i=0;i<checkbox.length;i++) {
if(checkbox[i].checked){
document.getElementById(box).classList.add('show');
}
}
}
HTML
<a href="#" id="reward" style="opacity:0">
TADA!
</a>
<form action="" id="">
<input type="checkbox" name="selectPlant" onclick="showMe('reward')">
<input type="checkbox" name="selectPlant" onclick="showMe('reward')">
<input type="checkbox" name="selectPlant" onclick="showMe('reward')">
<input type="checkbox" name="selectPlant" onclick="showMe('reward')">
</form>
CSS
#reward {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: red;
color: white;
pointer-events: none;
}
#reward.show {
opacity: 1 !important;
}
input[type=checkbox] {
width: 40px;
height: 40px;
}
任何帮助都会很棒!
最佳答案
您需要获取复选框的总数,并在勾选特定复选框时递增计数器。如果数字匹配,则必须勾选所有复选框。
function showMe (box) {
var checkbox = document.getElementsByName("selectPlant");
var counter=0;
for(var i=0;i<checkbox.length;i++) {
if(checkbox[i].checked){
counter++;
}
if(counter==checkbox.length)
{
document.getElementById(box).classList.add('show');
}
}
}
关于javascript - 检查是否所有复选框都被选中,然后将类添加到某物,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/55290701/