Solved

How to make a checkbox to select others?

Posted on 2009-04-08
5
996 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
[X]
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
  • 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

How our DevOps Teams Maximize Uptime

Our Dev teams are like yours. They’re continually cranking out code for new features/bugs fixes, testing, deploying, responding to production monitoring events and more. It’s complex. So, we thought you’d like to see what’s working for us. Read the use case whitepaper.

Question has a verified solution.

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

Having worked on larger scale sites, we found out that you are bound to look at more scalable solutions to integrating widgets, code snippets or complete applications and mesh them into functional sites, in any given composition. To share some of…
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…
The viewer will learn how to implement Singleton Design Pattern in Java.
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…

724 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