javascript - 使用 Java 脚本时无法设置未定义的属性 'display'

Question

我尝试使用 java 脚本更改 css，但没有成功。

function myFunction() {
    var x = document.getElementsByClassName('chirag');
    var check = document.getElementById('chk1');

    for (var i=0;i<x.length;i+=1){
	  if(check.checked){
    	   x.style.display = 'none';
	        }
	         else {
	        x.style.display = 'block';
	    }
	}
}

.chirag{
			display: none;
		}

<input type="checkbox"  id="chk1" value="Plate" onclick="myFunction()"> Plate  <br> 

<div id="plan_detail" class="chirag">
</div>

我尝试在复选框事件上添加 javascript 函数。我该如何修复它并更改 css 属性

Answer 1

您在 for 循环中遗漏了“i”:

function myFunction() {
    var x = document.getElementsByClassName('chirag');
    var check = document.getElementById('chk1');

    for (var i=0;i<x.length;i+=1){
	  if(!check.checked){
    	x[i].style.display = 'none';
	  } else {
	    x[i].style.display = 'block';
	  }
	}
}

.chirag{
			display: none;
		}

<input type="checkbox"  id="chk1" value="Plate" onclick="myFunction()"> Plate  <br> 

<div id="plan_detail" class="chirag">
   test
</div>