javascript的div可见性不起作用答案

【问题标题】：div visibility by java script not workingjavascript的div可见性不起作用
【发布时间】：2021-02-27 12:26:39
【问题描述】：

我有一个表单，其中我在一个 div 中保留了两个字段。有一个复选框确定此 div 的可见性我的代码不起作用。它不允许我单击此

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

【问题讨论】：

它似乎确实有效：jsfiddle.net/ek70xbaf/1
@Paflow 但在我的网页中不起作用
您是否尝试点击“时间”标签？
根本不工作
如果它在这里有效，但在您的页面上无效，那么根据定义，我们看不到问题的原因。请包括任何错误，如果可能的话，包括问题中可能涉及的任何其他代码。

标签： javascript html visibility

【解决方案1】：

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>

【讨论】：

【解决方案2】：

您错过了输入标签的 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>

【讨论】：