Флажок проверен, javascript в шаблоне Django

Я просто пытаюсь отобразить элементы hiddens в шаблоне django, когда флажок установлен, но в моей консоли я получаю

1:194 Uncaught TypeError: Cannot read properties of null (reading 'checked')
    at inventoryFunction (1:194:22)
    at HTMLInputElement.onclick (1:107:73)

элементы скрыты в таблице, и когда я проверяю категорию, я надеюсь, что они будут отображаться. вот шаблон :

<div class="inventory-content">
    <div class='category'>
        <div>Categories</div>
        <div class='category-checkbox'>
            {%for category in categories%}
            <input type="checkbox" id="{{category.id}}" onclick="inventoryFunction()">
            <label for="{{category.id}}"> {{category.name}}</label><br>
            {%endfor%}
        </div>
    </div>
    <div class='items'>
        {% for category in items%}
        <div class='{{category.id}}' style="display:none">
            <div>{{category}}</div>
            <table class='runninghours-table'>
                <tr>
                    <th>Item name</th>
                    <th>part number</th>
                    <th>R.O.B</th>
                </tr>
                <tbody>
                    {%for item in category.items.all%}
                    <tr>
                        <td>{{item.name}}</td>
                        <td>{{item.part_number}}</td>
                        <td>{{item.ROB}}</td>
                    </tr>
                    {%endfor%}
                    </tobdy>
            </table>
        </div>
        {%endfor%}
    </div>

</div>

JavaScript :

<script>
    function inventoryFunction() {
        var checkBox = document.getElementById("{{category.id}}");
        var item = document.getElementsByClassName("{{category.id}}");
        if (checkBox.checked == true) {
            item.style.display = "block";
        } else {
            item.style.display = "none";
        }
    }
</script>

Вернуться на верх