Javascript 如何将一个元素绑定到另一个元素

我不知道如何在标题中正确描述我的问题，如果问题与标题稍有不同，很抱歉：

对于与jsp/样式相关的问题，对于每个div（Polymer的paper按钮），我必须创建一个隐藏的复选框

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

$（文档）.ready（函数（）{
$（'#pb.'）。在（'click'，function（）上{
如果（$（'#ch'）。是（':checked'））{
$（'ch'）.prop（'checked'，false）；
}
else{$（'ch'）.prop（'checked'，true）；}；
});
});

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

---

提前感谢您的帮助。

您可以使用各种遍历方法来查找相关的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'));
    });
});