重新实现PrimeFaces selectManyCheckbox

Question

我正在尝试用html（ui：repeat）和JavaScript实现PrimeFaces selectManyCheckbox。所以在我之前：

<p:scrollPanel mode="native" style="height: 200px;">
    <p:selectManyCheckbox id="groups" value="#{myBean.selectedGroups}" layout="pageDirection" >
        <f:selectItems value="#{myBean.myGroups}" var="group" 
                       itemValue="#{group.id}" itemLabel="#{group.name}"/>
    </p:selectManyCheckbox>
</p:scrollPanel>

现在我有了这个：

<p:scrollPanel mode="native" style="height: 200px;" id="groups_div">
    <table id="groups" class="ui-selectmanycheckbox ui-widget">
        <ui:repeat value="#{myBean.myGroups}" var="group" varStatus="status">
            <tr>
                <td>
                    <div class="ui-chkbox ui-widget">
                        <ui:fragment rendered="#{myBean.selectedGroups.contains(group.id)}">
                            <div class="ui-helper-hidden-accessible">
                                <input id="groups:#{status.index}" name="groups" type="checkbox" value="#{group.id}" 
                                       checked="checked">
                                </input>
                            </div>
                            <div class="ui-chkbox-box ui-widget ui-corner-all ui-state-default ui-state-active">
                                <span class="ui-chkbox-icon ui-chkbox-icon ui-icon ui-icon-check"></span>
                            </div>
                        </ui:fragment>
                        <ui:fragment rendered="#{not myBean.selectedGroups.contains(group.id)}">
                            <div class="ui-helper-hidden-accessible">
                                <input id="groups:#{status.index}" name="groups" type="checkbox" value="#{group.id}">
                                </input>
                            </div>
                            <div class="ui-chkbox-box ui-widget ui-corner-all ui-state-default">
                                <span class="ui-chkbox-icon ui-chkbox-icon"></span>
                            </div>
                        </ui:fragment>
                    </div>
                </td>
                <td>
                    <label for="groups:#{status.index}">#{group.name}</label>
                </td>
            </tr>
        </ui:repeat>
    </table>
    <script id="groups_s" type="text/javascript">
        PrimeFaces.cw('SelectManyCheckbox','widget_groups',{id:'groups'});
    </script>
</p:scrollPanel>

这种方法几乎可行。 selectedGroups未提交的问题（此列表保持不变）。

PrimeFaces如何提交有效？如何更新它以包含selectedGroups？