Check All box for Richfaces Treenode

Question

Trying to create a checkbox to check all items in a treenode. I'm kind of new to JSF so I'm pretty stumped as how to implement this on a tree instead of a table. This is the current code:

<rich:panel style="width:400px;">           
            <h:selectBooleanCheckbox id="vehicleAll" onclick="selectAllModel(this.checked);">
            </h:selectBooleanCheckbox>
            <h:outputText value="  ALL"/>
        <rich:tree id="vehicleTree" switchType="client" 
            value="#{applicationScope.demoModelGrpList}" var="node" ajaxKeys="#{null}"
            binding="#{demoRptController.vehicleUiTree}"
            nodeSelectListener="#{demoRptController.selectionListener}"
            changeExpandListener="#{demoRptController.expansionListener}"
            ajaxSubmitSelection="true">
            <rich:treeNode id="modelNode" ajaxSingle="true" 
                icon="/images/pixel_node.gif" iconLeaf="/images/pixel_node.gif">
                <h:selectBooleanCheckbox id="cbxNode" value="#{node.selected}" style="position:relative; float:left; left:-22px;" class="vcBx">
                </h:selectBooleanCheckbox>
                <h:outputText value="#{node.name}" style="position:relative; float:left; left:-16px;"/>
            </rich:treeNode>
        </rich:tree>
    </rich:panel>

Script is:

<script type="text/javascript">
<![CDATA[
function selectAllModel(checks) {
    alert("calling select all");
    var array = document.getElementsByTagName("input");
    for(var i = 0; i < array.length; i++)
    {
       if(array[i].type == "checkbox")
       {
          if(array[i].className == "vcBx")
           {
            array[i].checked = checks;
           }
       }
    }
}
    ]]>
</script>

I placed the alert there for testing purposes; it's not even being called. I'm pretty sure I have my syntax correct so this has me scratching my head.

Answer 1

Answering my own question for the benefit of anyone having the same problem.

Apparently I can't use select for a function name. That solves one problem; I simply had to rename the function and now it's being called.

To solve the other (checkboxes not being selected), I had to look up the specific ids being generated by the treenode. Seeing that only one digit changes pertaining to the index of the node, I setup the loop specified below to select the checkboxes one by one and change them according to the status of the ALL checkbox. A bit convoluted, but it's the best way I've found to satisfy what needed to be done. From my experiments, selecting by input or type checkbox doesn't seem to work with grabbing h:selectBooleanCheckbox. Please feel free to correct me if I'm wrong on this.

Alternatively, you can use indexOf using the id for the node, but I only needed the parent nodes selected and none of the children, as doing this also selected all the child nodes.

function ccAllModel(checks) {
    for (var i = 0; i < 9; i++) {
        var vehicleId = "demoRptForm:vehicleTree:" + i + "::cbxNode";
        var array = document.getElementById(vehicleId);
        array.checked = checks.checked;
    }
}