Solved

How to make a checkbox to select others?

Posted on 2009-04-08
5
991 Views
Last Modified: 2013-11-24
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
Comment
Question by:Kadhiravan
  • 2
5 Comments
 
LVL 75

Accepted Solution

by:
Michel Plungjan earned 250 total points
ID: 24105543
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
 
LVL 3

Assisted Solution

by:kingsob
kingsob earned 250 total points
ID: 24109901
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
 
LVL 9

Expert Comment

by:darkapple
ID: 26069687
Dear kingsbob!
         I like the solution and tried your solution..But it doesn't work when i use h:command button for me..
0
 
LVL 3

Expert Comment

by:kingsob
ID: 26069729
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

Is Your Active Directory as Secure as You Think?

More than 75% of all records are compromised because of the loss or theft of a privileged credential. Experts have been exploring Active Directory infrastructure to identify key threats and establish best practices for keeping data safe. Attend this month’s webinar to learn more.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

The task A number given should be formatted for easy reading by separating digits into triads. Format must be made inline via JavaScript, i.e., frameworks / functions are not welcome. So let’s take a number like this “12345678.91¿ and format i…
This article discusses the difference between strict equality operator and equality operator in JavaScript. The Need: Because JavaScript performs an implicit type conversion when performing comparisons, we have to take this into account when wri…
This tutorial covers a practical example of lazy loading technique and early loading technique in a Singleton Design Pattern.
The viewer will learn the basics of jQuery including how to code hide show and toggles. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery…

895 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question

Need Help in Real-Time?

Connect with top rated Experts

12 Experts available now in Live!

Get 1:1 Help Now