如何使用纯 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">&nbsp; ...</table><script>var concession = document.getElementById("hidden");document.getElementById("check").addEventListener('click', function() {&nbsp; &nbsp; &nbsp; &nbsp;&nbsp;&nbsp; &nbsp; concession.style.display = (this.checked)? "block" : "none";});</script>最后，值得注意的是，JS 根本不是必需的，因为您可以仅使用 CSS 来完成具有给定标记的此类任务#check + table { display: none }#check:checked + table { display: block }

Answer 2

也许checked()是受到限制，更改你的函数名称：function changed() {&nbsp; var checked = document.getElementById("check").checked;&nbsp; var concession = document.getElementById("hidden");&nbsp; if (checked) {&nbsp; &nbsp; concession.style.display = "block";&nbsp; } else {&nbsp; &nbsp; concession.style.display = "none";&nbsp; }}<input type="checkbox" name="discount" id="check" onChange="changed()"><table id="hidden" class="center" style="display:none">&nbsp; <tr>&nbsp; &nbsp; <th>102-2 Taxable income is reduced by 400AZN</th>&nbsp; &nbsp; <th></th>&nbsp; &nbsp; <th><input type="radio" name="400"></th>&nbsp; </tr>&nbsp; <tr>&nbsp; &nbsp; <th>102-3 Taxable income is reduced by 200AZN</th>&nbsp; &nbsp; <th></th>&nbsp; &nbsp; <th><input type="radio" name="200"></th>&nbsp; </tr>&nbsp; <tr>&nbsp; &nbsp; <th>102-4 Taxable income is reduced by 100AZN</th>&nbsp; &nbsp; <th></th>&nbsp; &nbsp; <th><input type="radio" name="100"></th>&nbsp; </tr>&nbsp; <tr>&nbsp; &nbsp; <th>102-5 Taxable income is reduced by 50AZN</th>&nbsp; &nbsp; <th></th>&nbsp; &nbsp; <th>&nbsp; &nbsp; &nbsp; <input type="radio" name="50"></th>&nbsp; </tr></table>

Answer 3

您遇到此问题是因为checked保留名称。尝试将函数名称重命名为其他名称OnCheckboxClicked来解决此问题。演示：function OnCheckboxClicked() {&nbsp; var checkBox = document.getElementById("check");&nbsp; var concession = document.getElementById("hidden");&nbsp; if (checkBox.checked == true) {&nbsp; &nbsp; concession.style.display = "block";&nbsp; } else {&nbsp; &nbsp; concession.style.display = "none";&nbsp; }}<input type="checkbox" name="discount" id="check" onclick="OnCheckboxClicked()"><table id="hidden" class="center" style="display:none">&nbsp; <tr>&nbsp; &nbsp; <th>102-2 Taxable income is reduced by 400AZN</th>&nbsp; &nbsp; <th></th>&nbsp; &nbsp; <th><input type="radio" name="400"></th>&nbsp; </tr>&nbsp; <tr>&nbsp; &nbsp; <th>102-3 Taxable income is reduced by 200AZN</th>&nbsp; &nbsp; <th></th>&nbsp; &nbsp; <th><input type="radio" name="200"></th>&nbsp; </tr>&nbsp; <tr>&nbsp; &nbsp; <th>102-4 Taxable income is reduced by 100AZN</th>&nbsp; &nbsp; <th></th>&nbsp; &nbsp; <th><input type="radio" name="100"></th>&nbsp; </tr>&nbsp; <tr>&nbsp; &nbsp; <th>102-5 Taxable income is reduced by 50AZN</th>&nbsp; &nbsp; <th></th>&nbsp; &nbsp; <th>&nbsp; &nbsp; &nbsp; <input type="radio" name=5 0 "></th>&nbsp; &nbsp; &nbsp; &nbsp; </tr>&nbsp; &nbsp; </table>