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

当复选框被选中但不起作用时，我需要显示一个表。下面是我的脚本、复选框和表格

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

函数检查（）{
var checkBox=document.getElementById（“检查”）；
var特许权=document.getElementById（“隐藏”）；
如果（checkBox.checked==true）{
devention.style.display=“block”；
}否则{
devention.style.display=“无”；
}
}
102-2应纳税所得额减少400AZN
102-3应纳税所得额减少200AZN
102-4应纳税所得额减少100AZN
102-5应纳税所得额减少50AZN
当您使用像
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>

您必须将事件侦听器添加到复选框：

var checkbox = document.querySelector("#check");

checkbox.addEventListener( 'change', function() {
var concession = document.getElementById("hidden");
    if(this.checked) {
         concession.style.display='block';
    } else {
      concession.style.display='none';
    }
});

您将收到此问题，因为
已选中
是保留名称。尝试将函数名重命名为其他名称，如
OnCheckboxClicked
，以解决此问题

演示：


函数OnCheckboxClicked（）{
var checkBox=document.getElementById（“检查”）；
var特许权=document.getElementById（“隐藏”）；
如果（checkBox.checked==true）{
devention.style.display=“block”；
}否则{
devention.style.display=“无”；
}
}

102-2应纳税所得额减少400AZN
102-3应纳税所得额减少200AZN
102-4应纳税所得额减少100AZN
102-5应纳税所得额减少50AZN
可能
checked（）
受到限制，请更改函数的名称：


函数已更改（）{
var checked=document.getElementById（“check”）.checked；
var特许权=document.getElementById（“隐藏”）；
如果（选中）{
devention.style.display=“block”；
}否则{
devention.style.display=“无”；
}
}

102-2应纳税所得额减少400AZN
102-3应纳税所得额减少200AZN
102-4应纳税所得额减少100AZN
102-5应纳税所得额减少50AZN
我们还需要在DOMContentLoaded方法中添加此元素。不一定，在JS中使用元素之前，请确保在DOM中定义了该元素。上次输入中有一个输入错误：
name=50“
。
var checkbox = document.querySelector("#check");

checkbox.addEventListener( 'change', function() {
var concession = document.getElementById("hidden");
    if(this.checked) {
         concession.style.display='block';
    } else {
      concession.style.display='none';
    }
});