javascript - 如何将一个元素绑定(bind)到另一个元素

Question

我不知道如何在标题中正确描述我的问题，如果问题与标题略有不同，我们深表歉意:

对于 jsp/style 相关的问题，我必须为每个 div(Polymer 的纸按钮)创建一个隐藏的复选框。

<%int i; %>
<form ACTION="Computation.jsp">
        <% for(i=0; i<n; i++) {%> 
            <input type="checkbox" id="ch<%=i %>" name="cid">
            <div class="paperbutton" id="pb<%=i %>">Test</div>

        <% } %>
        <input type="submit" id="sub">
</form>

我的脚本必须做的是在按下相关按钮时选中复选框:

<script>
            $(document).ready(function() {          
                   $('#pb.<%=i%>').on('click', function() {
                    if($('#ch<%=i%>').is(':checked')) {
                       $('#ch<%=i%>').prop('checked', false);
                       }
                    else { $('#ch<%=i%>').prop('checked', true);};
                   });
            });
</script>

但显然我不能以这种方式混合 java 和 jQuery。如何仅使用 jQuery 执行相同的操作？

预先感谢您的帮助。

Answer 1

您可以使用各种遍历方法来查找相关的 DOM 元素。为简单起见，我将 DIV 和 checkbox 包装在容器 div 中。

HTML

<% for(i=0; i<n; i++) {%> 
    <div class="container">
        <input type="checkbox" name="cid">
        <div class="paperbutton" >Test</div>
    </div>
<% } %>

脚本

$(document).ready(function() {   
    //Bind event using the class provided to div       
    $('.paperbutton').on('click', function() {
        var checkbox = $(this).closest('.container').find(':checkbox');
        //var checkbox = $(this).prev(':checkbox');
        checkbox.prop('checked', !checkbox.is(':checked'));
    });
});

引用资料:

• .closest()
• .find()