0%

4.1.8 radiobutton标签 4.1.9radiobuttons标签

发表于 更新于 分类于 ，

4.1.8 radiobutton标签

测试链接

1
<a href="radiobuttonForm">测试radiobuttonForm</a><br>

域对象

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
// 域对象，实现序列化接口
public class User
    implements Serializable
{
    private static final long serialVersionUID = 1L;
    // 定义一个属性,用来绑定表单中的数据
    private String sex;
    // getter,setter方法
    public String getSex()
    {
        return sex;
    }
    public void setSex(String sex)
    {
        this.sex = sex;
    }
}

请求处理方法

1
2
3
4
5
6
7
8
9
10
11
12
@GetMapping(value = "/radiobuttonForm")
public String registerForm(Model model)
{
    // 创建领域对象
    User user = new User();
    // value值相等的单选按钮将会被选中
    user.setSex("女");
    // 添加领域对象到模型(也就去请求域中)
    model.addAttribute("user", user);
    // 返回视图
    return "radiobuttonForm";
}

绑定的表单

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
<!-- modelAttribute="user"表示绑定到域中的user属性 -->
<form:form modelAttribute="user" method="post"
    action="radiobuttonForm">
    <table>
        <tr>
            <td>性别:</td>
            <!--path指定user属性中的成员变量名称 -->
            <!--value属性的值于user对象的sex属性的值相等的时候选中 -->
            <td><form:radiobutton path="sex" value="男" />男&nbsp;
                <form:radiobutton path="sex" value="女" />女&nbsp;
                <form:radiobutton path="sex" value="不男不女" />不男不女(自己写的文本)&nbsp;
                <form:radiobutton path="sex" value="半男半女" />不男不女(自己写的文本)&nbsp;</td>
        </tr>
    </table>
</form:form>

渲染效果

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
<!-- modelAttribute="user"表示绑定到域中的user属性 -->
<form id="user" action="radiobuttonForm" method="post">
    <table>
        <tr>
            <td>性别:</td>
            <!--path指定user属性中的成员变量名称 -->
            <!--value属性的值于user对象的sex属性的值相等的时候选中 -->
            <td>
                <input id="sex1" name="sex" type="radio" value="男" />男&nbsp;
                <input id="sex2" name="sex" type="radio" value="女" checked="checked" />女&nbsp;
                <input id="sex3" name="sex" type="radio" value="不男不女" />不男不女(自己写的文本)&nbsp;
                <input id="sex4" name="sex" type="radio" value="半男半女" />不男不女(自己写的文本)&nbsp;</td>
        </tr>
    </table>
</form>

显示效果

这里有一张图片
使用这种方式按钮的提示文本要自己

4.1.9radiobuttons标签

使用数组或集合作为数据源

测试链接

1
<a href="radiobuttonsForm">测试radiobuttonsForm</a><br>

请求处理方法

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
@GetMapping(value = "/radiobuttonsForm")
public String registerForm2(Model model)
{
    User user = new User();
    // value值相等的会被选中中
    user.setSex("男");
    // 页面展现的可供选择的单选框内容sexList
    List<String> sexList = new ArrayList<String>();
    //数据源中的值将会填写到单选按钮的value属性值
    sexList.add("男");
    sexList.add("女");
    sexList.add("不男不女");
    sexList.add("半男半女");
    model.addAttribute("user", user);
    model.addAttribute("sexList", sexList);
    return "radiobuttonsForm";
}

绑定的表单

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
<!--     绑定模型中的user属性对应的对象 -->
<form:form modelAttribute="user" method="post"
    action="radiobuttonsForm">
    <table>
        <tr>
            <td>性别:</td>
            <!-- items绑定数据源,数据源可以是数组,集合,Map, -->
            <!-- 数据源中的数据将会被渲染成一个个选项 -->
            <!-- path绑定模型中user属性对应的对象的sex成员变量, -->
            <!-- 该成员变量的值如果在数据源中找到,将会勾选值相等的选项 -->
            <td><form:radiobuttons path="sex"
                    items="${sexList }" /></td>
        </tr>
    </table>
</form:form>

渲染效果

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
<!--     绑定模型中的user属性对应的对象 -->
<form id="user" action="radiobuttonsForm" method="post">
    <table>
        <tr>
            <td>性别:</td>
            <!-- items绑定数据源,数据源可以是数组,集合,Map, -->
            <!-- 数据源中的数据将会被渲染成一个个选项 -->
            <!-- path绑定模型中user属性对应的对象的sex成员变量, -->
            <!-- 该成员变量的值如果在数据源中找到,将会勾选值相等的选项 -->
            <td>
                <span>
                    <input id="sex1" name="sex" type="radio" value="男" checked="checked" />
                    <label for="sex1">男</label>
                </span>
                <span>
                    <input id="sex2" name="sex" type="radio" value="女" />
                    <label for="sex2">女</label>
                </span>
                <span>
                    <input id="sex3" name="sex" type="radio" value="不男不女" />
                    <label for="sex3">不男不女</label>
                </span>
                <span>
                    <input id="sex4" name="sex" type="radio" value="半男半女" />
                    <label for="sex4">半男半女</label>
                </span>
            </td>
        </tr>
    </table>
</form>

显示效果

这里有一张图片
使用这中方式不需要再jsp页面中写提示文本,Spring MVC会自动生成label标签作为提示文本,提示文本的内容是数据源中对应的数据项,单选按钮的value属性也是Spring MVC生成的,属性值也是数据源中的对应的数据项.

使用Map作为数据源

测试链接

1
<a href="radiobuttonsForm2">测试radiobuttonsForm2</a><br>

请求处理方法

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
@GetMapping(value = "/radiobuttonsForm2")
public String registerForm3(Model model)
{
    User user = new User();
    // 设置sex变量的值为"1"，页面的radio单选框的value=男会被选中
    user.setSex("1");
    // 页面展现的可供选择的单选框内容sexMap
    Map<String, String> sexMap = new HashMap<String, String>();
    sexMap.put("1", "男");
    sexMap.put("2", "女");
    sexMap.put("3", "不男不女");
    sexMap.put("4", "半男半女");
    model.addAttribute("user", user);
    model.addAttribute("sexMap", sexMap);
    return "radiobuttonsForm2";
}

渲染结果

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
<form id="user" action="radiobuttonForm2" method="post">
    <table>
        <tr>
            <td>性别:</td>
            <td>
                <span>
                    <input id="sex1" name="sex" type="radio" value="1" checked="checked" />
                    <label for="sex1">男</label>
                </span>
                <span>
                    <input id="sex2" name="sex" type="radio" value="2" />
                    <label for="sex2">女</label>
                </span>
                <span>
                    <input id="sex3" name="sex" type="radio" value="3" />
                    <label for="sex3">不男不女</label>
                </span>
                <span>
                    <input id="sex4" name="sex" type="radio" value="4" />
                    <label for="sex4">半男半女</label>
                </span>
            </td>
        </tr>
    </table>
</form>

使用这种方式同样不需要再jsp中自己写上单选按钮的提示文本,Spring MVC会生成label标签作为提示文本,lable标签中的内容对应数据源map中的值,map中的key作为单选按钮value属性的值。

显示效果

这里有一张图片

原文链接: 4.1.8 radiobutton标签 4.1.9radiobuttons标签