如何添加当前选中复选框所在的 div 的边框。作为基础,我使用了在线类(class)中的代码,该类(class)实际上经历了非常相似的功能。不幸的是,更改后,它不起作用。
HTML
<div id="checkbox">
<label>
<input id="highlightall" type="checkbox"> Check all
</label>
</div>
<div class="checkboxall">
<div class="box">
<label>
<input class="highlight" type="checkbox"> Checkbox1
</label>
</div>
<div class="box">
<label>
<input class="highlight" type="checkbox"> Checkbox2
</label>
</div>
<div class="box">
<label>
<input class="highlight" type="checkbox"> Checkbox3
</label>
</div>
</div>
和Javascript文件
function preparePage() {
document.getElementsByClassName("highlight").onclick = function() {
if (document.getElementsByClassName("highlight").checked) {
// use CSS style to show it
document.getElementsByClassName("box").style.border = "thick solid #0000FF";
} else {
// hide the div
document.getElementsByClassName("box").style.border = "none";
}
};
// now hide it on the initial page load.
document.getElementsByClassName("box").style.border = "none";
}
window.onload = function() {
preparePage();
};
此外,这是 jsfiddle 链接:https://jsfiddle.net/ohth2n7e/1/
感谢您的宝贵时间!
最佳答案
一切都在工作。选择所有。然后单击
document.getElementById('highlightall').onclick = function(){
var border = document.getElementsByClassName("highlight");
for(i=0;i < border.length; i++)
{
border[i].checked = (this.checked)? true : false;
}
}
var border = document.getElementsByClassName("highlight");
for(i=0;i < border.length; i++)
{
border[i].addEventListener("click", function() {
if (this.checked) {
this.parentElement.style.border = "thick solid #0000FF";
} else {
this.parentElement.style.border = "none";
}
});
}
.checkboxall {
background:#222;
padding:10px;
color:#fff;
}
<div id="checkbox">
<label>
<input id="highlightall" type="checkbox"> Check all
</label>
</div>
<div class="checkboxall">
<div class="checkbox">
<label>
<input class="highlight" type="checkbox"> Checkbox1
</label>
</div>
<div class="checkbox">
<label>
<input class="highlight" type="checkbox"> Checkbox2
</label>
</div>
<div class="checkbox">
<label>
<input class="highlight" type="checkbox"> Checkbox3
</label>
</div>
</div>
关于javascript - 如何为多个复选框绑定(bind)单击事件处理程序?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/41977093/