切換顯示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香草

回答

相關問題