JSF Tutorial - JSF Form CheckBox Example

The following sections shows how to create HTML check box using JSF tags.

The h:selectBooleanCheckbox tag renders an HTML input element of the type "checkbox".

The following JSF tag

<h:selectBooleanCheckbox value="Remember Me" id="chkRememberMe" />

is rendered to the following HTML tag.

<input id="jsfForm1:chkRememberMe" type="checkbox" 
   name="jsfForm1:chkRememberMe" checked="checked" />

The h:selectManyCheckbox tag renders a set of HTML input element of type "checkbox", and format it with HTML table and label tags.

The following tags in JSF

<h:selectManyCheckbox value="#{userData.data}">
   <f:selectItem itemValue="1" itemLabel="Item 1" />
   <f:selectItem itemValue="2" itemLabel="Item 2" />
</h:selectManyCheckbox>

are rendered into the following HTML tags.

<table>
   <tr>
      <td><input name="j_idt6:j_idt8" id="j_idt6:j_idt8:0" value="1" 
            type="checkbox" checked="checked" />
         <label for="j_idt6:j_idt8:0" class=""> Item 1</label>
      </td>
      <td><input name="j_idt6:j_idt8" id="j_idt6:j_idt8:1" value="2" 
            type="checkbox" checked="checked" />
         <label for="j_idt6:j_idt8:1" class=""> Item 2</label>
      </td>     
   </tr>
</table>

Tag Attributes

Attribute	Description
id	id for the tag
binding	Reference to the component used in a backing bean
rendered	A boolean value; false would suppress rendering
styleClass	Cascading stylesheet (CSS) class name
value	value binding
valueChangeListener	A method binding that responds to value changes
converter	Converter class name
validator	Class name of a validator attached to the component
required	A boolean; if true, marks the tag as required
accesskey	gives focus to an element
accept	Comma-separated list of content types for a form
accept-charset	Comma- or space-separated list of character encodings for a form.
alt	Alternative text for nontextual elements such as images
border	Pixel value for an element's border width
charset	Character encoding for a linked resource
coords	Coordinates for an element whose shape is a rectangle, circle, or polygon
dir	Direction for text. Valid values are ltr (left to right) and rtl (right to left).
disabled	Disabled state of an input element or button
hreflang	Base language of a resource specified with the href attribute;
lang	Base language of an element's attributes and text
maxlength	Maximum number of characters for text fields
readonly	Read-only state of an input field
style	Inline style information
tabindex	Numerical value specifying a tab index
target	The name of a frame in which a document is opened
title	A title used for accessibility. Browsers typically create tooltips for the title's value
type	Type of a link; for example, stylesheet
width	Width of an element
onblur	Event handler for losing focus
onchange	Event handler for value changes
onclick	Event handler for Mouse button clicked over the element
ondblclick	Event handler for Mouse button double-clicked
onfocus	Event handler for element received focus
onkeydown	Event handler for Key pressed
onkeypress	Event handler for Key pressed and released
onkeyup	Event handler for Key released
onmousedown	Event handler for Mouse button pressed
onmousemove	Event handler for mouse moved
onmouseout	Event handler for mouse left
onmouseover	Event handler for mouse moved onto
onmouseup	Event handler for mouse button released
onreset	Event handler for form reset
onselect	Event handler for Text selected
immediate	Process validation early in the life cycle

h:selectBooleanCheckbox Single CheckBox

The following code is from demo.xhtml.

It uses the h:selectBooleanCheckbox to create a single check box.

<?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>
      <h:form>
      <h2>1. Single checkbox</h2>
      <h:selectBooleanCheckbox value="#{user.rememberMe}" /> Remember Me
      
      <h:commandButton value="Submit" action="result" />
    <h:commandButton value="Reset" type="reset" />

      </h:form>
      
    </h:body>

</html>

The following code is from UserBean.java.

package com.java2s.common;

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 boolean isRememberMe() {
    return rememberMe;
  }

  public void setRememberMe(boolean rememberMe) {
    this.rememberMe = rememberMe;
  }

}

The following code is from 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>
      </ol>
    </h:body>

</html>

Download Form_CheckBoxSingle.zip

Hardcoded CheckBox

The following code is from demo.xhtml.

It uses the h:selectManyCheckbox and f:selectItem to create hardcoded checkbox items.

<?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>
      <h:form>
      <h2>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 />

      <h:commandButton value="Submit" action="result" />
    <h:commandButton value="Reset" type="reset" />

      </h:form>
      
    </h:body>

</html>

The following code is from 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.favNumber1 : #{user.favNumber1InString}</li>
      </ol>
    </h:body>

</html>

The following code is from UserBean.java.

package com.java2s.common;


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 String[] favNumber1;

  public String[] getFavNumber1() {
    return favNumber1;
  }
  public void setFavNumber1(String[] favNumber1) {
    this.favNumber1 = favNumber1;
  }

  public String getFavNumber1InString() {
    return Arrays.toString(favNumber1);
  }
  

}

Download Form_CheckBox_Hardcoded.zip

CheckBox Generated By Array

The following code is from 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.favNumber2 : #{user.favNumber2InString}</li>
      </ol>
    </h:body>
</html>

The following code is from UserBean.java.

It defines a getFavNumber2Value() method to return a hardcoded array as the checkbox item values.

package com.java2s.common;


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 String[] favNumber2;
  
  public String[] getFavNumber2() {
    return favNumber2;
  }

  public void setFavNumber2(String[] favNumber2) {
    this.favNumber2 = favNumber2;
  }
  //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);
  }    
}

The following code is from demo.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"
      xmlns:f="http://java.sun.com/jsf/core">
    <h:body>
      <h:form>
      <h2>Mutiple checkboxes</h2>
      
      Generated by Array :
       <h:selectManyCheckbox value="#{user.favNumber2}">
         <f:selectItems value="#{user.favNumber2Value}" />
       </h:selectManyCheckbox>
       
      <br />

      <h:commandButton value="Submit" action="result" />
    <h:commandButton value="Reset" type="reset" />

      </h:form>
      
    </h:body>

</html>

Download Form_CheckBox_Generated_By_Array.zip

CheckBox Generated By Map

The following code is from 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.favNumber3 : #{user.favNumber3InString}</li>
      </ol>
    </h:body>
</html>

The following code is from UserBean.java.

package com.java2s.common;


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 String[] favNumber3;
  public String[] getFavNumber3() {
    return favNumber3;
  }

  public void setFavNumber3(String[] favNumber3) {
    this.favNumber3 = favNumber3;
  }
  //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);
  }    
}

The following code is from demo.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"
      xmlns:f="http://java.sun.com/jsf/core"
      >
    <h:body>
      <h:form>
      <h2>Mutiple checkboxes</h2>
      
      Generated by Map :
       <h:selectManyCheckbox value="#{user.favNumber3}">
         <f:selectItems value="#{user.favNumber3Value}" />
       </h:selectManyCheckbox>
       
      <br />

      <h:commandButton value="Submit" action="result" />
    <h:commandButton value="Reset" type="reset" />

      </h:form>
      
    </h:body>

</html>

Download Form_CheckBox_Generated_By_Map.zip

CheckBox Multiple CheckBoxes

The following code is from UserBean.java.

package com.java2s.common;

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 String[] favNumber4;
  public String[] getFavNumber4() {
    return favNumber4;
  }
  public void setFavNumber4(String[] favNumber4) {
    this.favNumber4 = favNumber4;
  }
  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);
  }
    
}

The following code is from demo.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"
      xmlns:f="http://java.sun.com/jsf/core">
    <h:body>
      <h:form>
      <h2>Mutiple checkboxes</h2>
      
      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>

The following code is from 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>
      <p>user.favNumber4 : #{user.favNumber4InString}</p>
    </h:body>
</html>

Download Form_CheckBox_Multiple_CheckBoxes.zip

To RUN

Copy the generated WAR file from the target folder to Tomcat deployment folder and run Tomcat-Install-folder/bin/startup.bat.

After Tomcat finish starting, type the following URL in the browser address bar.

http://localhost:8080/simple-webapp/demo.xhtml