JSF 表单复选框示例

JSF教程 – JSF表单复选框示例

以下部分显示如何使用JSF标记创建HTML复选框。

h:selectBooleanCheckbox标签渲染类型为“checkbox”的HTML输入元素。

以下JSF标记

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

渲染到以下HTML标记。

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

h:selectManyCheckbox标签呈现一组HTML输入元素，并使用HTML表格和标签标签格式化。

JSF中的以下标记

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

被渲染到以下HTML标记中。

<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>

标签属性

属性	描述
id	标签的标识
binding	引用在backing bean中使用的组件
rendered	布尔值; false将抑制渲染
styleClass	级联样式表(CSS)类名称
value	值绑定
valueChangeListener	响应值更改的方法绑定
converter	转换器类名
validator	附加到组件的验证器的类名
required	布尔值; 如果为true，则根据需要标记标签
accesskey	给予一个元素的焦点
accept	表单的内容类型的逗号分隔列表
accept-charset	表单的字符编码的逗号或空格分隔列表。
alt	非文字元素(例如图片)的替代文字
border	元素的边框宽度的像素值
charset	链接资源的字符编码
coords	形状为矩形，圆形或多边形的元素的坐标
dir	文本的方向。有效值为 ltr (从左到右)和 rtl (从右到左)。
disabled	输入元素或按钮的禁用状态
hreflang	使用 href 属性指定的资源的基本语言;
lang	元素的属性和文本的基本语言
maxlength	文本字段的最大字符数
readonly	输入字段的只读状态
style	内联样式信息
tabindex	指定制表符索引的数值
target	打开文档的框架的名称
title	用于辅助功能的标题。浏览器通常为标题的值创建工具提示
type	链接类型; 例如样式表
width	元素的宽度
onblur	失去焦点的事件处理程序
onchange	值更改的事件处理程序
onclick	鼠标按钮的事件处理程序点击该元素
ondblclick	双击鼠标按钮的事件处理程序
onfocus	元素接收焦点的事件处理程序
onkeydown	按键的事件处理程序
onkeypress	键按下并释放的事件处理程序
onkeyup	Key的事件处理程序发布
onmousedown	鼠标按钮的事件处理程序
onmousemove	鼠标移动的事件处理程序
onmouseout	鼠标左的事件处理程序
onmouseover	鼠标移动到的事件处理程序
onmouseup	释放鼠标按钮的事件处理程序
onreset	表单重置的事件处理程序
onselect	选择文本的事件处理程序
immediate	在生命周期的早期进行过程验证

h:selectBooleanCheckbox单个复选框

以下代码来自demo.xhtml。

它使用h:selectBooleanCheckbox创建一个复选框。

<?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>

下面的代码来自UserBean.java。

package cn.w3cschool.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;
  }

}

以下代码来自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>

下载 Form_CheckBoxSingle.zip

硬编码复选框

以下代码来自demo.xhtml。

它使用h:selectManyCheckbox和f:selectItem to创建硬编码复选框项。

<?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>

以下代码来自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>

下面的代码来自UserBean.java。

package cn.w3cschool.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);
  }

}

下载Form_CheckBox_Hardcoded.zip

数组生成的复选框

以下代码来自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>

下面的代码来自UserBean.java。

它定义了一个getFavNumber2Value()方法来返回硬编码数组作为复选框项目值。

package cn.w3cschool.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);
  }    
}

以下代码来自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>

下载Form_CheckBox_Generated_By_Array.zip

映射生成的复选框

以下代码来自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>

下面的代码来自UserBean.java。

package cn.w3cschool.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);
  }    
}

以下代码来自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>

下载Form_CheckBox_Generated_By_Map.zip

复选框多个复选框

下面的代码来自UserBean.java。

package cn.w3cschool.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);
  }

}

以下代码来自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>

以下代码来自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>

下载Form_CheckBox_Multiple_CheckBoxes.zip

运行

将生成的WAR文件从目标文件夹复制到Tomcat部署文件夹，并运行Tomcat-Install-folder/bin/startup.bat。

Tomcat完成启动后，在浏览器地址栏中键入以下URL。

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

JSF 表单复选框示例

JSF教程 – JSF表单复选框示例

标签属性

h:selectBooleanCheckbox单个复选框

硬编码复选框

数组生成的复选框

映射生成的复选框

复选框多个复选框

运行

相关推荐

热门文章