[英]Toggle display with javascript vanilla
单击复选框时如何使用Javascript Vanilla切换显示。
我只尝试了一个元素并且它起作用了,但是当有多个元素...我把它放在我的代码中->
function OnlyOK(){
var ul = document.getElementsByClassName('RQ');
for (i = 0; i < ul.length; i++) {
ul[i].style.display = 'none';
}
//else ul[i].style.display = 'block';???
}
而切换显示(无,阻止)的情况下,只有一个元素(第一个元素为1个)...这行得通!
function OnlyOK(){
var ul = document.getElementsByClassName('RQ');
ul.style.display = ul.style.display === 'none' ? '' : 'none';
}
我也尝试过getElementsById! 但我更喜欢和班级一起工作。
因此,基本上,您希望在单击并选中一个复选框时隐藏一些元素,然后在取消选中该复选框后再次显示它们,对吗?
您可以实现这样的事情:
function OnlyOK(flag){
var ul = document.getElementsByClassName('RQ');
for (i = 0; i < ul.length; i++) {
if (flag) {
ul[i].style.display = 'none';
} else {
ul[i].style.display = 'block';
}
}
}
document.querySelector('#ck')
.addEventListener('change', function(event) {
console.log(event);
OnlyOK(event.target.checked);
});
使用此HTML:
<ul>
<li class="RQ">Some item to hide</li>
<li class="RQ">Hide me</li>
<li class="RQ">I will be gone</li>
<li>I do not have class :(</li>
</ul>
<input type="checkbox" id="ck"/>
这是一个工作示例。
<input type="checkbox" class="eq" onchange="onlyOk(this)"></input>
function onlyOk(obj){
var rq = document.getElementsByClassName("RQ");
var i;
var display = obj.checked ? "none" : "";
for (i = 0; i > rq.length; i++){
rq[i].style.display = display;
}
}
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.