如何使用纯 JavaScript 通过选中复选框来显示表格？

Question

我需要在选中该复选框时显示一个表格，但它不起作用。您可以在下面找到我的脚本、复选框和表格    <script>    function checked() {        var checkBox = document.getElementById("check");        var concession = document.getElementById("hidden");        if (checkBox.checked == true){            concession.style.display = "block";        } else {            concession.style.display = "none";        }    }</script><input type = "checkbox" name = "discount" id = "check" onclick = "checked()"><table id = "hidden" class = "center" style = "display:none">        <tr>            <th>102-2 Taxable income is reduced by 400AZN</th>            <th></th>            <th><input type = "radio" name = "400"></th>        </tr>        <tr>            <th>102-3 Taxable income is reduced by 200AZN</th>            <th></th>            <th><input type = "radio" name = "200"></th>        </tr>        <tr>            <th>102-4 Taxable income is reduced by 100AZN</th>            <th></th>            <th><input type = "radio" name = "100"></th>        </tr>        <tr>            <th>102-5 Taxable income is reduced by 50AZN</th>            <th></th>            <th><input type = "radio" name = 50"></th>        </tr>    </table>我该如何解决这个问题？

Answer 1

当您使用内联处理程序时，就像onclick您需要分配一个函数一样，这onclick="checked"就是正确的方法

作为旁注，addEventListener()应优先通过分配事件

<input type="checkbox" name="discount" id="check">

<table id="hidden" class="center" style="display:none">

  ...

</table>

<script>

var concession = document.getElementById("hidden");

document.getElementById("check").addEventListener('click', function() {        

    concession.style.display = (this.checked)? "block" : "none";

});

</script>

最后，值得注意的是，JS 根本不是必需的，因为您可以仅使用 CSS 来完成具有给定标记的此类任务

#check + table { display: none }

#check:checked + table { display: block }

Answer 2

也许checked()是受到限制，更改你的函数名称：

function changed() {

  var checked = document.getElementById("check").checked;

  var concession = document.getElementById("hidden");

  if (checked) {

    concession.style.display = "block";

  } else {

    concession.style.display = "none";

  }

}

<input type="checkbox" name="discount" id="check" onChange="changed()">

<table id="hidden" class="center" style="display:none">

  <tr>

    <th>102-2 Taxable income is reduced by 400AZN</th>

    <th></th>

    <th><input type="radio" name="400"></th>

  </tr>

  <tr>

    <th>102-3 Taxable income is reduced by 200AZN</th>

    <th></th>

    <th><input type="radio" name="200"></th>

  </tr>

  <tr>

    <th>102-4 Taxable income is reduced by 100AZN</th>

    <th></th>

    <th><input type="radio" name="100"></th>

  </tr>

  <tr>

    <th>102-5 Taxable income is reduced by 50AZN</th>

    <th></th>

    <th>

      <input type="radio" name="50"></th>

  </tr>

</table>

Answer 3

您遇到此问题是因为checked保留名称。尝试将函数名称重命名为其他名称OnCheckboxClicked来解决此问题。

演示：

function OnCheckboxClicked() {

  var checkBox = document.getElementById("check");

  var concession = document.getElementById("hidden");

  if (checkBox.checked == true) {

    concession.style.display = "block";

  } else {

    concession.style.display = "none";

  }

}

<input type="checkbox" name="discount" id="check" onclick="OnCheckboxClicked()">

<table id="hidden" class="center" style="display:none">

  <tr>

    <th>102-2 Taxable income is reduced by 400AZN</th>

    <th></th>

    <th><input type="radio" name="400"></th>

  </tr>

  <tr>

    <th>102-3 Taxable income is reduced by 200AZN</th>

    <th></th>

    <th><input type="radio" name="200"></th>

  </tr>

  <tr>

    <th>102-4 Taxable income is reduced by 100AZN</th>

    <th></th>

    <th><input type="radio" name="100"></th>

  </tr>

  <tr>

    <th>102-5 Taxable income is reduced by 50AZN</th>

    <th></th>

    <th>

      <input type="radio" name=5 0 "></th>

        </tr>

    </table>