자바 스크립트 바닐라로 디스플레이 전환

Question

확인란을 클릭하면 자바 스크립트 바닐라로 표시를 전환하는 방법.

나는 단 하나 개의 요소 시도하고 작동하지만이 둘 이상있는 경우 ... 난 내 코드에 넣고 ->

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

}