选中复选框时显示内容的Javascript

在这个提琴中，我制作了一个脚本，如果复选框被选中，它应该显示表单，但我无法使它工作。它说函数是未知变量

Html

---

我认为您错过了在html中包含Javascript文件的机会，因为它无法在单击复选框时找到函数

toggleCheckbox

。也

span元素也有class='LicenseCustomer'，将其更改为id='LicenseCustomer' 尝试包含内联脚本

<script>
function toggleCheckbox() {
  var lfckv = document.getElementById("_My.notFinal").checked;
  console.log(lfckv);
  if (lfckv) {

    document.getElementById("LicenseCustomer").style.display = "block";
  } else {
    document.getElementById("LicenseCustomer").style.display = "none";
  }
}
</script>
<input type="checkbox" id="_My.notFinal" onclick='toggleCheckbox();'>
<label><b>Buying for someone else.</b>
  <label>&nbsp;

    <span id="LicenseCustomer" style="display:none">

<tr valign=middle>
    <td class="bodycopy" align=right width=160><b>License Contact:</b>&nbsp;</td>
    <td class="smallcopy" nowrap><input name="_My.LicenseContact" type="text" class="inputBox" size="32" _label="<br>License Contact"></td>
    </tr>
    <tr valign=middle>
    <td class="bodycopy" align=right><b> License E-mail Address:</b>&nbsp;</td>
    <td class="smallcopy" nowrap><input name="_My.LicenseEmail" type="text" class="inputBox" size="32" _label="<br> License E-mail Address"></td>
    </tr>
    <tr valign=middle>
    <td class="bodycopy" align=right><b> License Phone:</b>&nbsp;</td>
    <td class="smallcopy" nowrap><input name="_My.LicensePhone" type="text" class="inputBox" size="32" _label="<br> License Phone"></td>
    </tr>

</span>

函数toggleCheckbox（）{
var lfckv=document.getElementById（“\u My.notFinal”）。选中；
控制台日志（lfckv）；
if（lfckv）{
document.getElementById（“LicenseCustomer”）.style.display=“block”；
}否则{
document.getElementById（“LicenseCustomer”）.style.display=“无”；
}
}
为别人买东西。
许可证联系人：
许可证电子邮件地址：
牌照电话：

这里是正确的版本

它与事件的附加时间有关。请查看以下内容：

我还将

span

更改为

div

，将

class

属性更改为

id

。我不建议在

或

中使用

，最好在

上直接使用

id

，或者如果您有多行，则使用

。

更正版本：

我想告诉你几个错误：- 首先，您使用class=“LicenseCustomer”并使用document.getElementById选择器（它无法获取具有类名的元素）

其次，当您使用onclick=“toggleCheckbox（）；”，调用函数时，不必在函数名的末尾使用“分号”（这是一种不正确的语法）-onclick=“toggleCheckbox（）”（无分号）

---

演示：

尝试类似的内容

function toggleCheckbox(){
     var lfckv = document.getElementById('myCheck').checked;
     if(lfckv){
        document.getElementsByTagName("span")[0].setAttribute("style", "display:none");
     } else {
         document.getElementsByTagName("span")[0].setAttribute("style", "display:block");
    }
}

---

确保您的toggleCheckbox位于包装标题下，以便其全局可访问，并使用id=“LicenseCustomer”而不是类see@VinodLouis为什么要删除您的答案？这是正确的，您将spans类设置为LicenseCustomer而不是id，并尝试获取ElementById。将类更改为id。@AlexandruSeverin我知道，但有人提到，它的拼写错误最好写在评论中并关闭，这也很有意义，其他人对此感到抱歉。：）没有理由相信这就是问题所在，或者OP没有包含JS。它也可以与分号一起工作-你可以在那里有更多的语句谢谢！这对我来说确实有效。我必须在单击复选框时调用该方法。i、 这部分救了我。“”document.getElementById（“\u My.notFinal”）.onclick=toggleCheckbox；""

<script>
function toggleCheckbox() {
  var lfckv = document.getElementById("_My.notFinal").checked;
  console.log(lfckv);
  if (lfckv) {

    document.getElementById("LicenseCustomer").style.display = "block";
  } else {
    document.getElementById("LicenseCustomer").style.display = "none";
  }
}
</script>
<input type="checkbox" id="_My.notFinal" onclick='toggleCheckbox();'>
<label><b>Buying for someone else.</b>
  <label>&nbsp;

    <span id="LicenseCustomer" style="display:none">

<tr valign=middle>
    <td class="bodycopy" align=right width=160><b>License Contact:</b>&nbsp;</td>
    <td class="smallcopy" nowrap><input name="_My.LicenseContact" type="text" class="inputBox" size="32" _label="<br>License Contact"></td>
    </tr>
    <tr valign=middle>
    <td class="bodycopy" align=right><b> License E-mail Address:</b>&nbsp;</td>
    <td class="smallcopy" nowrap><input name="_My.LicenseEmail" type="text" class="inputBox" size="32" _label="<br> License E-mail Address"></td>
    </tr>
    <tr valign=middle>
    <td class="bodycopy" align=right><b> License Phone:</b>&nbsp;</td>
    <td class="smallcopy" nowrap><input name="_My.LicensePhone" type="text" class="inputBox" size="32" _label="<br> License Phone"></td>
    </tr>

</span>

document.getElementById("_My.notFinal").onclick = toggleCheckbox;

<!DOCTYPE html>
    <html>
    <head>
      <meta charset="utf-8">
      <meta name="viewport" content="width=device-width">
      <title>JS Bin</title>
    </head>
    <body>
    <input type="checkbox" id="_My.notFinal" class='checkbox'>
    <label><b>Buying for someone else.</b>
      </label>&nbsp;

        <span class="LicenseCustomer" style="display:none">

    <tr valign=middle>
        <td class="bodycopy" align=right width=160><b>License Contact:</b>&nbsp;</td>
        <td class="smallcopy" nowrap><input name="_My.LicenseContact" type="text" class="inputBox" size="32" _label="<br>License Contact"></td>
        </tr>
        <tr valign=middle>
        <td class="bodycopy" align=right><b> License E-mail Address:</b>&nbsp;</td>
        <td class="smallcopy" nowrap><input name="_My.LicenseEmail" type="text" class="inputBox" size="32" _label="<br> License E-mail Address"></td>
        </tr>
        <tr valign=middle>
        <td class="bodycopy" align=right><b> License Phone:</b>&nbsp;</td>
        <td class="smallcopy" nowrap><input name="_My.LicensePhone" type="text" class="inputBox" size="32" _label="<br> License Phone"></td>
        </tr>

    </span>
    <script src="https://code.jquery.com/jquery-2.1.4.js"></script>

    </body>
    </html>

   $(document).ready(function()
    {
        $(".checkbox").change(function() {
        if(this.checked) 
         {
            $(".LicenseCustomer").css('display','block');
        }
        else
        {
                $(".LicenseCustomer").css('display','none');
        }
    })
  });

function toggleCheckbox(){
     var lfckv = document.getElementById('myCheck').checked;
     if(lfckv){
        document.getElementsByTagName("span")[0].setAttribute("style", "display:none");
     } else {
         document.getElementsByTagName("span")[0].setAttribute("style", "display:block");
    }
}