JSF 2 checkboxes example

In JSF, <h:selectBooleanCheckbox /> tag is used to render a single HTML input element of “checkbox” type.

//JSF...
<h:selectBooleanCheckbox value="#{user.rememberMe}" /> Remember Me
 
//HTML output...
<input type="checkbox" name="j_idt6:j_idt8" /> Remember Me

While <h:selectManyCheckbox /> tag is used to render a set of HTML input element of type “checkbox”, and format it with HTML table and label tags.

//JSF...
<h:selectManyCheckbox value="#{user.favNumber1}">
   	<f:selectItem itemValue="1" itemLabel="Number1 - 1" />
   	<f:selectItem itemValue="2" itemLabel="Number1 - 2" />
   	<f:selectItem itemValue="3" itemLabel="Number1 - 3" />
</h:selectManyCheckbox>
 
//HTML output...
<table>
<tr>
  <td>
	<input name="j_idt6:j_idt10" id="j_idt6:j_idt10:0" value="1" type="checkbox" />
	<label for="j_idt6:j_idt10:0" class=""> Number1 - 1</label></td>
  <td>
	<input name="j_idt6:j_idt10" id="j_idt6:j_idt10:1" value="2" type="checkbox" />
	<label for="j_idt6:j_idt10:1" class=""> Number1 - 2</label></td>
  <td>
	<input name="j_idt6:j_idt10" id="j_idt6:j_idt10:2" value="3" type="checkbox" />
	<label for="j_idt6:j_idt10:2" class=""> Number1 - 3</label></td>
  <td>
</tr>
</table>

JSF 2.0 example

Here’s a JSF 2.0 example to show the use of “h:selectBooleanCheckbox” and “h:selectManyCheckbox” tags.

h:selectBooleanCheckbox
Render a single checkbox, and wire it with a boolean property.

h:selectManyCheckbox
Render a group of checkboxes and populate the data in different ways :

Hardcoded value in “f:selectItem” tag.
Generate values with an Array and put it into “f:selectItems” tag.
Generate values with a Map and put it into “f:selectItems” tag.
Generate values with an Object array and put it into “f:selectItems” tag, then represent the value with “var” attribute.

1. Backing Bean

A backing bean to hold the submitted checkboxes values.

package com.mkyong;
 
import java.util.Arrays;
import java.util.LinkedHashMap;
import java.util.Map;
 
import javax.faces.bean.ManagedBean;
import javax.faces.bean.SessionScoped;
 
@ManagedBean(name="user")
@SessionScoped
public class UserBean{
 
	public boolean rememberMe;
	public String[] favNumber1;
	public String[] favNumber2;
	public String[] favNumber3;
	public String[] favNumber4;
 
	//getter and setter methods...
 
	public String getFavNumber1InString() {
		return Arrays.toString(favNumber1);
	}
 
	//Generated by Array
	public String[] getFavNumber2Value() {
 
		favNumber2 = new String[5];
		favNumber2[0] = "Number2 - 1";
		favNumber2[1] = "Number2 - 2";
		favNumber2[2] = "Number2 - 3";
		favNumber2[3] = "Number2 - 4";
		favNumber2[4] = "Number2 - 5";
 
		return favNumber2;
	}
 
	public String getFavNumber2InString() {
		return Arrays.toString(favNumber2);
	}
 
 
	//Generated by Map
	private static Map<String,Object> number3Value;
	static{
		number3Value = new LinkedHashMap<String,Object>();
		number3Value.put("Number3 - 1", "1"); //label, value
		number3Value.put("Number3 - 2", "2");
		number3Value.put("Number3 - 3", "3");
		number3Value.put("Number3 - 4", "4");
		number3Value.put("Number3 - 5", "5");
	}
 
	public Map<String,Object> getFavNumber3Value() {
		return number3Value;
	}
 
	public String getFavNumber3InString() {
		return Arrays.toString(favNumber3);
	}
 
	//Generated by Object array
	public static class Number{
		public String numberLabel;
		public String numberValue;
 
		public Number(String numberLabel, String numberValue){
			this.numberLabel = numberLabel;
			this.numberValue = numberValue;
		}
 
		public String getNumberLabel(){
			return numberLabel;
		}
 
		public String getNumberValue(){
			return numberValue;
		}
 
	}
 
	public Number[] number4List;
 
	public Number[] getFavNumber4Value() {
 
		number4List = new Number[5];
		number4List[0] = new Number("Number4 - 1", "1");
		number4List[1] = new Number("Number4 - 2", "2");
		number4List[2] = new Number("Number4 - 3", "3");
		number4List[3] = new Number("Number4 - 4", "4");
		number4List[4] = new Number("Number4 - 5", "5");
 
		return number4List;
	}
 
	public String getFavNumber4InString() {
		return Arrays.toString(favNumber4);
	}
 
}

2. JSF Page

A JSF page to demonstrate the use “h:selectBooleanCheckbox” and “h:selectManyCheckbox” tags.

<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"   
      xmlns:h="http://java.sun.com/jsf/html"
      xmlns:f="http://java.sun.com/jsf/core"
      >
    <h:body>
 
    	<h1>JSF 2 checkboxes example</h1>
    	<h:form>
 
    	    <h2>1. Single checkbox</h2>
	    <h:selectBooleanCheckbox value="#{user.rememberMe}" /> Remember Me
 
	    <h2>2. Mutiple checkboxes</h2>
 
	    1. Hard-coded with "f:selectItem" : 
   		<h:selectManyCheckbox value="#{user.favNumber1}">
   			<f:selectItem itemValue="1" itemLabel="Number1 - 1" />
   			<f:selectItem itemValue="2" itemLabel="Number1 - 2" />
   			<f:selectItem itemValue="3" itemLabel="Number1 - 3" />
   			<f:selectItem itemValue="4" itemLabel="Number1 - 4" />
   			<f:selectItem itemValue="5" itemLabel="Number1 - 5" />
   		</h:selectManyCheckbox>
 
	    <br />
 
	    2. Generated by Array :
   		<h:selectManyCheckbox value="#{user.favNumber2}">
   			<f:selectItems value="#{user.favNumber2Value}" />
   		</h:selectManyCheckbox>
 
   		<br />
 
	    3. Generated by Map :
   		<h:selectManyCheckbox value="#{user.favNumber3}">
   			<f:selectItems value="#{user.favNumber3Value}" />
   		</h:selectManyCheckbox>
 
	    <br />
 
	    4. Generated by Object with var :
   		<h:selectManyCheckbox value="#{user.favNumber4}">
   			<f:selectItems value="#{user.favNumber4Value}" var="n"
   			itemLabel="#{n.numberLabel}" itemValue="#{n.numberValue}" />
   		</h:selectManyCheckbox>
 
	    <br />
 
    	    <h:commandButton value="Submit" action="result" />
	    <h:commandButton value="Reset" type="reset" />
 
    	</h:form>
 
    </h:body>
</html>

result.xhtml…

<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"   
      xmlns:h="http://java.sun.com/jsf/html"
      >
 
    <h:body>
 
    	<h1>JSF 2 checkboxes example</h1>
 
    	<h2>result.xhtml</h2>
 
    	<ol>
    		<li>user.rememberMe : #{user.rememberMe}</li>
    		<li>user.favNumber1 : #{user.favNumber1InString}</li>
    		<li>user.favNumber2 : #{user.favNumber2InString}</li>
    		<li>user.favNumber3 : #{user.favNumber3InString}</li>
    		<li>user.favNumber4 : #{user.favNumber4InString}</li>
    	</ol>
    </h:body>
 
</html>

3. Demo

When “submit” button is clicked, link to “result.xhtml” page and display the submitted checkboxe values.

How to checked checkbox’s value by default?

h:selectBooleanCheckbox
The value of “f:selectItem” tag is checked if the boolean value is set to true. In above example, if you set boolean property “rememberMe” to true :

@ManagedBean(name="user")
@SessionScoped
public class UserBean{
 
	public boolean rememberMe = true;
 
	//...

The “rememberMe” checkbox value is checked by default.

h:selectManyCheckbox
The values of “f:selectItems” tag are checked if it matched to the “value” of “h:selectManyCheckbox” tag. In above example, if you set favNumber3 to {“1″,”3″} :

@ManagedBean(name="user")
@SessionScoped
public class UserBean{
 
	public String[] favNumber3 = {"1","3"};
 
	//...

The “favNumber3″ checkboxes, “Number 1″ and “Number 3″ values are checked by default.

Download Source Code

Download It – JSF-2-Checkboxes-Example.zip (10KB)

Reference

Tags : checkbox jsf2

mkyong

Founder of Mkyong.com, love Java and open source stuffs. Follow him on Twitter, or befriend him on Facebook or Google Plus.

Here are some of my recommended Books

Popular Posts

Mark Umadhay May 1, 2013 at 8:37 pm
Hi Sir,
Thanks for sharing this. I would like to ask, How to insert selectManyCheckbox in datatable by using only selectManyCheckbox one value?.
Thanks in Advance.
Mark
Sesharao March 6, 2013 at 2:38 pm
Really its a good post, Thank you very much.
nishkad February 12, 2013 at 6:46 am
How can get checked/selected values as Map IN JSF 2.O ?
nishkad February 12, 2013 at 6:45 am
HI,
I need to get checked values as key pair. For example my checkbox label is ‘Lable1′ and value is ‘Id1′, i need to get checked value as key pair value collection. How can I do that ?
DougMH May 2, 2012 at 6:25 am
String format = “%-10s %-12s %-35s %-10s %-10s\r\n”;
retStr += String.format(format,
rs.getString(“range_date”).substring(0, 10),
rs.getString(“range_name”),
rs.getString(“event”),
rs.getString(“rso”),
rs.getString(“oic”));
When I debug and send the output also to the console, it’s properly formatted as per ‘format” above.
When it is display in a selectOneListBox wiht the font-family set to Courier, it displays as Courier, but the formatting is lost and there is only a single space between elements.
When I call a javascript ondblclick=”function(this)”, and display the string, the formatting is exactly as it should be.
It only appears the formatting is altered in the display of the list items on the page?
Kaiz February 28, 2012 at 4:50 pm
Hello,
I have a small difficulty, it would mean a lot if you could show me the way to solve it please.
I have an xhtml page which contains checkboxes, around 12.
I wish to bind the values of all the checkboxes i checked to a single variable in my backing bean.
Can you show me the way how to do it using JSF2.0 methods only please

Javier November 17, 2011 at 2:04 am

Hello,

Thank you very much by example, but I have a problem.

At the time of action because the data do not reach the Backing Bean when the h: commandButton has an f: ajax, only when it does not have the f: ajax data if they are present in the Backing Bean.

What could be the problem?

&lt;h:selectManyCheckbox value=&quot;#{user.favNumber4}&quot;&gt;
   &lt;f:selectItems value=&quot;#{user.favNumber4Value}&quot; var=&quot;n&quot;
   		  itemLabel=&quot;#{n.numberLabel}&quot; itemValue=&quot;#{n.numberValue}&quot; /&gt;
&lt;/h:selectManyCheckbox&gt;
 
&lt;h:commandButton value=&quot;Submit&quot; action=&quot;result&quot;&gt;
   &lt;f:ajax execute=&quot;otherElement&quot; /&gt;
&lt;/h:commandButton&gt;

hinanos May 17, 2011 at 4:02 am
Hello,
thanks for sharing this. You demonstrated how to bind bean values to checkboxes.
Now do you know how it works for the other way round in JSF 2.0? I mean to initialize bean properties from a multicheckbox form ? This may be related to other post of your site using the f:metadata tag but for a an array of values ?
Thanks in advance.
Hinanos.

JSF 2 checkboxes example

JSF 2.0 example

1. Backing Bean

2. JSF Page

3. Demo

How to checked checkbox’s value by default?

Download Source Code

Reference

Popular Posts

What is your opinion?

Do you know the answer?

JSF 2.0 example

1. Backing Bean

2. JSF Page

3. Demo

How to checked checkbox’s value by default?

Download Source Code

Reference

Related Posts

Popular Posts

What is your opinion?

Do you know the answer?