Question

在这个小提琴中，我制作了一个脚本，如果勾选了复选框，我应该显示该格式，但我无法使其正常工作。它说该函数是未知变量。

HTML

<input type="checkbox" id="_My.notFinal" onclick='toggleCheckbox();'>
<label>
   <b>Buying for someone else.</b>
</label>
<span id="LicenseCustomer" style="display:none">/*some form*/</span>

和javascript

function toggleCheckbox() {
  var lfckv = document.getElementById("_My.notFinal").checked;
  if (lfckv) {
    document.getElementById("LicenseCustomer").style.display = "block";
  } else {
    document.getElementById("LicenseCustomer").style.display = "none";
  }
}

https://jsfiddle.net/00gckvxw/1/

Answer 1

这是更正后的版本https://jsfiddle.net/00gckvxw/24/。

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

它与附加事件的时间有关。看看这个：testing a function in jsfiddle。

我还将span更改为div和class属性为id。我建议您不要在<tr>或<div>内使用<span>，最好直接在id使用<tr>，如果您有多个，请使用<tbody>线。

Answer 2

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

此外，span元素还有class =＆＃39; LicenseCustomer＆＃39;，将其更改为id =＆＃39; LicenseCustomer＆＃39; 尝试包括内联脚本

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

Answer 3

更正后的版本：

http://pastebin.com/RrMD78AG

我想告诉你几个错误： - 首先你使用的是class =“LicenseCustomer”，你正在使用document.getElementById选择器（它不能获取带有类名的元素）。

你正在使用onclick =“toggleCheckbox（）;”，当你调用函数时，你不必在函数名末尾使用'分号'（它的语法不正确） - onclick =“toggleCheckbox（）” （没有分号）。

Answer 4

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

以下是Javascript

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

演示：https://jsbin.com/bowicivupa/edit?html,js,console,output

Answer 5

尝试这样的事情。

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

如果选中复选框，则显示内容的Javascript

5 个答案: