Question

单击复选框时如何使用Javascript Vanilla切换显示。

我尝试过只使用一个元素并且它可以工作但是当有多个元素时......我把它放在我的代码中 - ＆gt;

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！但我更喜欢上课。

Answer 1

所以基本上你想隐藏一些元素，当你点击并选中一个复选框并在取消选中复选框后再次显示它们时，对吗？

你可以做到这样的事情：

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"/>

Here是一个有效的例子。

Answer 2

<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;
        }

}

用javascript vanilla切换显示

2 个答案: