[Okta Webinar] Learn how to a build a cloud-first strategyRegister Now

x
  • Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 1000
  • Last Modified:

How to make a checkbox to select others?

I have a check box in the header of a table.

My requirement is, when I select the checkbox in the header, I want the other check boxes in the column under that header should also be selected. When I deselect, the others should also be deselected. (select all/clear all option).

How can this be achieved in JSF?
0
Kadhiravan
Asked:
Kadhiravan
  • 2
2 Solutions
 
Michel PlungjanIT ExpertCommented:
Here is the script

You can probably do the JSF yourself

<script>
function selectAll(theChk) {
  var f=theChk.form;
  var chk=theChk.checked;
  for(i=0;i<f.elements.length;i++) {
    if (f.elements[i].type=='checkbox' && f.elements[i].name.indexOf(theChk.value)==0) {
     // if the checkbox name starts with the value of the checkall checkbox
      f.elements[i].checked=chk
    }
  }
}
</script>
 
<form>
<input type="checkbox" onClick="selectAll(this)" value="a">All A: 
<input type="checkbox" name="a1">A1
<input type="checkbox" name="a2">A2
<input type="checkbox" name="a3">A3<br>
<input type="checkbox" onClick="selectAll(this)" value="b">All B:
<input type="checkbox" name="b1">B1
<input type="checkbox" name="b2">B2
<input type="checkbox" name="b3">B3
</form>

Open in new window

0
 
kingsobCommented:
here is my jsf code which does exactly that

let me know if you need help understanding anything
<%@ taglib uri="http://java.sun.com/jsf/html" prefix="h" %>
<%@ taglib uri="http://java.sun.com/jsf/core" prefix="f"%>
 
<html>
    <head>
        <script>
            function HighlightRow(chkB)
            {
                chkB.parentNode.parentNode.parentNode.style.backgroundColor = chkB.checked ? '#EEEEEE' : '#FFFFFF';
            }
 
            function SelectAllCheckboxesSpecific(spanChk)
            {
                var IsChecked = spanChk.checked;
                var Chk = spanChk;
                Parent = document.getElementById('form:dataTable');
                var items = Parent.getElementsByTagName('input');
 
                for (i = 0; i < items.length; i++)
                {
                    if (items[i].id != Chk && items[i].type == "checkbox")
                    {
                        if (items[i].checked != IsChecked)
                        {
                            items[i].click();
                        }
                    }
                }
            }
        </script>
    </head>
    <body>
        <f:view>
            <h:form id="form">
 
                <table width="100%">
                    <tr>
                        <td align="left">
                            <h:commandLink value="last" action="#{duplicate.last}"/>
                        </td>
                        <td align="center">
                            <h:commandLink value="Link Selected Profiles" action="#{duplicate.link}"/>
                        </td>
                        <td align="right">
                            <h:commandLink value="next" action="#{duplicate.next}"/>
                        </td>
                    </tr>
                </table>
 
                <h:dataTable id="dataTable" value="#{duplicate.duplicates}" var="dataItem" border="1" cellpadding="5" cellspacing="0" width="100%">
                    <h:column>
                        <f:facet name="header">
                            <h:selectBooleanCheckbox onclick="SelectAllCheckboxesSpecific(this);"/>
                        </f:facet>
                        <div align="center">
                            <h:selectBooleanCheckbox value="#{dataItem.selected}" onclick="HighlightRow(this);"/>
                        </div>
                    </h:column>
 
                    <h:column>
                        <f:facet name="header">
                            <h:outputText value="email"/>
                        </f:facet>
                        <h:outputText value="#{dataItem.from.email}"/>
                        <br/>
                        <h:outputText value="#{dataItem.to.email}"/>
                    </h:column>
 
                    <h:column>
                        <f:facet name="header">
                            <h:outputText value="name"/>
                        </f:facet>
                        <h:outputText value="#{dataItem.from.firstname} #{dataItem.from.lastname}"/>
                        <br/>
                        <h:outputText value="#{dataItem.to.firstname} #{dataItem.to.lastname}"/>
                    </h:column>
 
                    <h:column>
                        <f:facet name="header">
                            <h:outputText value="homephone"/>
                        </f:facet>
                        <h:outputText value="#{dataItem.from.homephone}"/>
                        <br/>
                        <h:outputText value="#{dataItem.to.homephone}"/>
                    </h:column>
 
                    <h:column>
                        <f:facet name="header">
                            <h:outputText value="businessphone"/>
                        </f:facet>
                        <h:outputText value="#{dataItem.from.businessphone}"/>
                        <br/>
                        <h:outputText value="#{dataItem.to.businessphone}"/>
                    </h:column>
 
                    <h:column>
                        <f:facet name="header">
                            <h:outputText value="mobilephone"/>
                        </f:facet>
                        <h:outputText value="#{dataItem.from.mobilephone}"/>
                        <br/>
                        <h:outputText value="#{dataItem.to.mobilephone}"/>
                    </h:column>
 
                    <h:column>
                        <f:facet name="header">
                            <h:outputText value="email"/>
                        </f:facet>
                        <h:outputLink value="../logout?id=5e13&contactid=#{dataItem.from.contactid}">
                            <h:outputText value="iProfile"/>
                        </h:outputLink>
                        <br/>
                        <h:outputLink value="../logout?id=5e13&contactid=#{dataItem.to.contactid}">
                            <h:outputText value="iProfile"/>
                        </h:outputLink>
                    </h:column>
 
                </h:dataTable>
 
                <table width="100%">
                    <tr>
                        <td align="left">
                            <h:commandLink value="last" action="#{duplicate.last}"/>
                        </td>
                        <td align="center">
                            <h:commandLink value="Link Selected Profiles" action="#{duplicate.link}"/>
                        </td>
                        <td align="right">
                            <h:commandLink value="next" action="#{duplicate.next}"/>
                        </td>
                    </tr>
                </table>
 
            </h:form>
        </f:view>
    </body>
</html>

Open in new window

0
 
darkappleCommented:
Dear kingsbob!
         I like the solution and tried your solution..But it doesn't work when i use h:command button for me..
0
 
kingsobCommented:
do you mean a h:command for this part?

                        <f:facet name="header">
                            <h:selectBooleanCheckbox onclick="SelectAllCheckboxesSpecific(this);"/>
                        </f:facet>

if so, you may want to try

<h:selectBooleanCheckbox onclick="SelectAllCheckboxesSpecific(this); return false;"/>

to stop it from actually submiting the form
0

Featured Post

Concerto's Cloud Advisory Services

Want to avoid the missteps to gaining all the benefits of the cloud? Learn more about the different assessment options from our Cloud Advisory team.

  • 2
Tackle projects and never again get stuck behind a technical roadblock.
Join Now