Question

I have created web-application using JSF 2.0 where I have many checkboxes. I want to select those checkboxes on clicking Select All Checkbox.

I have below code

<t:selectBooleanCheckbox value="#{UserRegistration.selectAll}" onclick="selectAll(this)" />

<t:selectManyCheckbox value="#{UserRegistration.pagesSelected}" layout="pageDirection"  layoutWidth="4">
    <f:selectItem itemValue="registerForPatentss" itemLabel="Register New Applicant"/>
    <f:selectItem itemValue="success" itemLabel="Register New Project" />
    <f:selectItem itemValue="getReportss" itemLabel="Project Reports" />
    <f:selectItem itemValue="searhPatentss" itemLabel="Search For Project" />
    <f:selectItem itemValue="addUserss" itemLabel="Add User Account" />
    <f:selectItem itemValue="logPatentSystemss" itemLabel="System Log" />
    <f:selectItem itemValue="userlistss" itemLabel="Details Of Registered Users" />
</t:selectManyCheckbox>

javascript is

<script language="javascript">
    function selectAll(checkbox) {
        alert('called me == ' + checkbox.checked);

        var elements = checkbox.form.elements;
        if (checkbox.checked==true) {
            alert('selecting all');
            for (var i = 0; i &lt; elements.length; i++) {
                var element = elements[i];
                alert('selecting all ' + element.checked + '==' + element.id + '==');
                if (/checkboxId$/.test(element.id)) {
                    alert('inside...')
                    element.checked = checkbox.checked;
                }
            }
        }
     }
</script>

However it is not working.

For testing I added alert('selecting all ' + element.checked + '=='); however for this I get output as selecting all ==== i.e. I don’t get data for element.id.

When I change <t:selectManyCheckbox to <h:selectManyCheckbox I get value.

Any idea what I am doing wrong?

Edit 1

HTML generated output is

<table id="favNumber4">
<tr><td><label><input type="checkbox" name="favNumber4" checked="checked" value="1" />&#160;Joomla Websites (Fahim M Parkar)</label></td><td><label><input type="checkbox" name="favNumber4" checked="checked" value="2" />&#160;iPhone Application (Fahim M Parkar)</label></td></tr>
<tr><td><label><input type="checkbox" name="favNumber4" checked="checked" value="3" />&#160;Project 001 (New Applicant Two)</label></td><td><label><input type="checkbox" name="favNumber4" value="4" />&#160;Project 002 (New Applicant Two)</label></td></tr>
<tr><td><label><input type="checkbox" name="favNumber4" value="5" />&#160;Project 003 (New Applicant Two)</label></td><td><label><input type="checkbox" name="favNumber4" value="6" />&#160;Project 004 (New Applicant Two)</label></td></tr>
<tr><td><label><input type="checkbox" name="favNumber4" value="7" />&#160;PP1 (Testing Applicant)</label></td><td><label><input type="checkbox" name="favNumber4" value="8" />&#160;PP2 (Testing Applicant)</label></td></tr>
<tr><td><label><input type="checkbox" name="favNumber4" value="9" />&#160;TA - PR001 (Testing Applicant)</label></td><td><label><input type="checkbox" name="favNumber4" value="10" />&#160;XXXXX 1 (XXXXX)</label></td></tr>

Edit 2

Note that I also have more checkboxes as below.

<h:selectManyCheckbox value="#{UserRegistration.rightSelected}" id="myRight">
    <f:selectItem itemValue="add" itemLabel="Add"/>
    <f:selectItem itemValue="delete" itemLabel="Delete" />
    <f:selectItem itemValue="edit" itemLabel="Edit" />
    <f:selectItem itemValue="invite" itemLabel="Invite For Projects" />
</h:selectManyCheckbox>

Answer 1

Below is what I had….

<script language="javascript" type="text/javascript">
    function selectAllProjects() {
        var iLen=userRegisterForm.elements.length;
        for (var i=0; i&lt;iLen; i++) {
            if (document.userRegisterForm.elements[i].type == "checkbox" &amp;&amp; document.userRegisterForm.elements[i].value>=1) {
                document.userRegisterForm.elements[i].checked = true;
            }
        }
    }

    function deselectAllProjects() {
        var iLen=userRegisterForm.elements.length;
        for (var i=0; i&lt;iLen; i++) {
            if (document.userRegisterForm.elements[i].type == "checkbox" &amp;&amp; document.userRegisterForm.elements[i].value>=1) {
                document.userRegisterForm.elements[i].checked = false;
            }
        }
    }

</script>


| <a onclick="selectAllProjects();">Select All</a> |
<a onclick="deselectAllProjects();">Clear All</a> |