javascript - 如何使用纯 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 }