切换显示javascript香草

如何使用Javascript香草切换显示，当我点击一个复选框。切换显示javascript香草

我想只有一个元素，它的作品，但是当有不止一台...我把这个在我的代码 - >

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了！但我更喜欢和班级一起工作。

来源

2016-09-28 Pablo Malynovytch

你确定你已经在你的HTML中一切正常吗？它似乎工作[这里]（http://codepen.io/razvan-tudosa/pen/XjgyrA）。 –

是的...第一个代码是不工作的第二个是！但我需要第一个 –

第二个不能工作...我认为你忘了索引'ul [0]'或类似 – devnull69

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

可以实现这样的事情是这样的：

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是一个工作的例子。

来源

2016-09-28 19:52:23

无法读取null的属性'addEventListener'可能是什么问题???我将ck id和新的javascript code..Can是因为我没有安装jquery？ –

我的例子不使用jQuery，所以不会如此。在我看来，你所说的没有找到这个元素。我的例子是JSBin为你工作吗？ –

不...我尝试所有的代码...与你一样，但在控制台它说我有一个错误 –

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

}

来源

2016-09-28 19:56:56

你可以使用一个变量消除一个循环：'var display = obj.checked？ “none”：“”;'并用它来分配给每个元素。 – Marcelo

好的解决方法，即减少一半的功能代码！ @Marcelo –

切换显示javascript香草

回答

相关问题