div java 脚本的可见性无效

Question

我有一个表格，其中我在 div 中保留了两个字段。有一个复选框决定此 div 的可见性我的代码不是 working.It 不允许我点击此

<script>    
  function yesnoCheck() {
    if (document.getElementById('yesCheck').checked) {
    document.getElementById('ifYes').style.visibility = 'visible';
    }
    else document.getElementById('ifYes').style.visibility = 'hidden';

    }
</script>

<input type="CHECKBOX" onclick="javascript:yesnoCheck();" name="period" id="yesCheck"> 
<label for "period" style="padding-left:20px;margin:0px;color:black;font-weight:bold;">Time </label>    

<div id="ifYes" style="visibility:hidden" >
  <label style="padding:0px;margin:0px;color:black;font-weight:bold;">Date From </label>
  <input style="padding:0px;margin:0px;" type="date" id="datefrom" name="datefrom"value="" placeholder="Date from" >
  <label style="padding:0px;margin:0px;color:black;font-weight:bold;">To</label>
  <input style="padding:0px;margin:0px;"type="date"  id="dateto" name="dateto"  value="" placeholder="Date to">
</div>

Answer 1

您错过了输入标签的 ID。 id="yesCheck"

function yesnoCheck() {
  if (document.getElementById('yesCheck').checked) {
    document.getElementById('ifYes').style.visibility = 'visible';
  } else document.getElementById('ifYes').style.visibility = 'hidden';

}

<input id="yesCheck" type="CHECKBOX" onclick="javascript:yesnoCheck();" name="period">
<label for "period" style="padding-left:20px;margin:0px;color:black;font-weight:bold;">Time </label>
<div id="ifYes" style="visibility:hidden">
  <label style="padding:0px;margin:0px;color:black;font-weight:bold;">Date From </label>
  <input style="padding:0px;margin:0px;" type="date" id="datefrom" name="datefrom" value="" placeholder="Date from">
  <label style="padding:0px;margin:0px;color:black;font-weight:bold;">To</label>
  <input style="padding:0px;margin:0px;" type="date" id="dateto" name="dateto" value="" placeholder="Date to">
</div>

Answer 2

label 中的 for 属性接受元素 id，而不是 name

参考： https://developer.mozilla.org/en-US/docs/Web/HTML/Element/label#Attributes

function yesnoCheck() {
  if (document.getElementById('yesCheck').checked) {
    document.getElementById('ifYes').style.visibility = 'visible';
  } else document.getElementById('ifYes').style.visibility = 'hidden';

}

<input id="yesCheck" type="CHECKBOX" onclick="javascript:yesnoCheck();" name="period">
<label for="yesCheck" style="padding-left:20px;margin:0px;color:black;font-weight:bold;">Time </label>
<div id="ifYes" style="visibility:hidden">
  <label style="padding:0px;margin:0px;color:black;font-weight:bold;">Date From </label>
  <input style="padding:0px;margin:0px;" type="date" id="datefrom" name="datefrom" value="" placeholder="Date from">
  <label style="padding:0px;margin:0px;color:black;font-weight:bold;">To</label>
  <input style="padding:0px;margin:0px;" type="date" id="dateto" name="dateto" value="" placeholder="Date to">
</div>

div java 脚本的可见性无效

div visibility by java script not working

html

javascript

visibility