jquery找不到id/表单元格

我正在尝试编写一个动态复选框树。 我使用c:forEach语句来实现这一点，然后使用jquery来显示/隐藏相关的后续复选框组

奇怪的是，jquery只识别一些表单元格

在下面的代码中，只有第一组复选框（“upperMostExpertise”）和第二类中的第一个复选框（第一个“expertise2”）按应有的方式运行

我在前面设置了一个请求参数，但我认为应该清楚代码试图做什么

复选框树还不是完美的，但我仍然想理解为什么它没有发挥应有的作用（特别是，当我点击一些复选框时，随后的td单元不会显示，而当我点击其他复选框时，它会显示）

我不确定问题是在于jquery代码还是动态生成的html代码

html代码：

<table border="1">

<script>

</script>

            <tr>

                <td>

                    <c:forEach var="expertise" items="${upperMostExpertise.subExpertise}">

                        <input type="checkbox" name="${expertise.level}"
                           value="${expertise.name}" id="${expertise.name}">
                        ${expertise.name}<br>

                    </c:forEach>

                </td>

                <c:forEach var="expertise1"  items="${upperMostExpertise.subExpertise}">

                    <c:forEach var="expertise2" items="${expertise1.subExpertise}"
                               varStatus="count">

                        <c:if test="${count.first}">
                            <td id="${expertise1.name}" style="display: none">
                        </c:if>

                        <input type="checkbox" name="${expertise2.level}"
                               value="${expertise2.name}" id="${expertise2.name}">
                        ${expertise2.name}<br>

                        <c:if test="${count.last}">
                            </td>
                        </c:if>

                    </c:forEach>

                </c:forEach>

                <c:forEach var="expertise1" items="${upperMostExpertise.subExpertise}">

                    <c:forEach var="expertise2" items="${expertise1.subExpertise}">

                        <c:forEach var="expertise3" items="${expertise2.subExpertise}"
                                   varStatus="count">

                            <c:if test="${count.first}">
                                <td id="${expertise2.name}" style="display: none">
                            </c:if>

                            <input type="checkbox" name="${expertise3.level}"
                                   value="${expertise3.name}">${expertise3.name}<br>

                            <c:if test="${count.last}">
                                </td>
                            </c:if>

                        </c:forEach>

                    </c:forEach>

                </c:forEach>

            </tr>

        </table>

---

对于动态创建的复选框，您需要事件委派，请像这样使用

.on（）

：

$(function(){
    $(document).on("click", "input[type='checkbox']", function(){
        var inputName = $(this).attr("value");
        $("td#" + inputName).toggle();
        console.log("inputName variable equals " + inputName);
        console.log("target td cell id is: " + $("td#" + inputName).attr("id"));
        console.log("id of this table cell is: " + $(this).parents("td").first().attr("id"));
        console.log("this table cell style attribute is: " + $(this).parents("td").first().attr("style"));
    });
}); 

使用live（'click'）…或on（'click'，。。。。。

$(function(){
    $(document).on("click", "input[type='checkbox']", function(){
        var inputName = $(this).attr("value");
        $("td#" + inputName).toggle();
        console.log("inputName variable equals " + inputName);
        console.log("target td cell id is: " + $("td#" + inputName).attr("id"));
        console.log("id of this table cell is: " + $(this).parents("td").first().attr("id"));
        console.log("this table cell style attribute is: " + $(this).parents("td").first().attr("style"));
    });
});