根据复选框选择显示和隐藏表不起作用

时间:2019-04-23 07:47:10

标签: javascript html css

我有一个测试代码块,试图通过该代码块显示基于复选框的选择。该操作正在起作用,并且正在显示该表。唯一的问题是-没有边界。您能给我关于我在这里做错什么的建议吗?

<!DOCTYPE html>
<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
        <title>JSP Page</title>
    </head>
    <body>
        <table border="1">
                    <tr>
                    <td style=min-width:50px></td>
                    <td style=min-width:50px>Retrofit</td>
                    <td style=min-width:50px><input style=min-width:50px id="retrofit" name="retrofit" type="checkbox" value="1" onchange="javascript:toggleOtherTextboxVisible()" /></td>

       </tr>
        </table>
        <table style="display:none" name="table" id ='table' border="1"/>
        <th>new</th>
        <th>newer</th>
        </table>    
</body>

    <script type="text/javascript">
    function toggleOtherTextboxVisible()
    {
        var check = document.getElementById('retrofit');
        if (check.checked) {
            document.getElementById('table').style.display. = 'block';
        }
        else
        {
            document.getElementById('table').style.display = 'none';
        }                
    }
</script>
</html>

1 个答案:

答案 0 :(得分:1)

我看到的第一个错误是表的显示值不是“ block”,而是“ table”。

因此,只需更改此行:

document.getElementById('table').style.display. = 'block';

收件人:

document.getElementById('table').style.display. = 'table';