thymeleaf中获取checkbox的值
时间: 2023-10-01 21:04:47 浏览: 157
在Thymeleaf中获取checkbox的值可以通过以下代码实现:
```
<input type="checkbox" name="exampleCheckbox" th:value="true" th:checked="${exampleValue}"/>
```
其中,`th:value`属性设置checkbox选中时的值,可以是任意值,但通常是一个布尔值。`th:checked`属性则指定checkbox是否被选中,它的值可以是一个布尔表达式,比如`${exampleValue}`。
在Controller中,可以通过`@RequestParam`注解获取checkbox的值,如下所示:
```
@RequestMapping("/submit")
public String submitForm(@RequestParam("exampleCheckbox") boolean exampleValue) {
// 处理提交的表单数据
return "result";
}
```
这样,就可以获取到checkbox选中的值,然后进行相应的处理。
相关问题
若依+Thymeleaf 获取复选框回显
在使用若依框架和Thymeleaf模板引擎的Web应用中,可以通过以下步骤实现复选框的回显:
1. 在HTML页面中,使用th:field指令设置复选框的name属性和value值,例如:
```
<input type="checkbox" th:field="${user.roles}" th:value="${role.id}" />
```
其中,`${user.roles}`表示绑定到模型数据的多选框属性,`${role.id}`表示每个选项的值。
2. 在控制器中,设置模型数据,例如:
```
model.addAttribute("user", user);
```
其中,`user`是包含`roles`属性的对象。
3. 在HTML页面中,使用th:checked指令判断复选框是否选中,例如:
```
<input type="checkbox" th:field="${user.roles}" th:value="${role.id}" th:checked="${user.roles.contains(role)}" />
```
其中,`${user.roles.contains(role)}`表示判断`user.roles`是否包含当前选项。
这样就可以实现复选框的回显了。
html中thymeleaf模板,添加页面,判断如果改变下拉框id="xqdmc"的值为1 , 复选框 <div class="col-sm-9" th:with="type=${@dict.getType('xqd_jcy_lb')}"> <label th:each="dict : ${type}" class="check-box"> <input name="fenlei" type="checkbox" th:value="${dict.dictValue}" th:text="${dict.dictLabel}" > </label> </div> name="fenlei"重置,可选的值为11,12,13,14,15。并默认是选中状态,其它值不可选。判断如果改变下拉框id="xqdmc"的值为2 , 复选框 name="fenlei"重置,可选的值为12 ,并默认是选中状态,其它值不可选。判断如果改变下拉框id="xqdmc"的值为10, 复选框name="fenlei"重置,可选的值为32,并默认是选中状态,其它值不可选。判断如果改变下拉框id="xqdmc"的值为11, 复选框name="fenlei"重置,可选的值为21,22,并默认是选中状态,其它值不可选。判断如果改变下拉框id="xqdmc"的值为12, 复选框name="fenlei"重置,可选的值为21,22,并默认是选中状态,其它值不可选。
可以通过Thymeleaf中的条件判断语句th:if和th:unless实现上述处理逻辑。具体代码如下:
```html
<div class="form-group">
<label class="col-sm-3 control-label">选区名称:</label>
<div class="col-sm-9">
<select id="xqdmc" name="xqdmc">
<option value="1">选区1</option>
<option value="2">选区2</option>
<option value="10">选区10</option>
<option value="11">选区11</option>
<option value="12">选区12</option>
</select>
</div>
</div>
<div class="form-group">
<label class="col-sm-3 control-label">分类:</label>
<div class="col-sm-9" th:with="type=${@dict.getType('xqd_jcy_lb')}">
<label th:each="dict : ${type}" class="check-box">
<input type="checkbox" th:value="${dict.dictValue}" th:text="${dict.dictLabel}"
th:checked="${#strings.contains(fenlei, dict.dictValue)}" th:disabled="${#strings.contains(fenlei, dict.dictValue) and not #strings.contains(fenlei, defaultFenlei)}">
</label>
</div>
</div>
<script th:inline="javascript">
/* 定义默认可选的分类 */
var defaultFenlei = ["11", "12", "13", "14", "15"];
/* 当选择选区1时,类型可选值为11,12,13,14,15 */
var xqdmc1Fenlei = ["11", "12", "13", "14", "15"];
/* 当选择选区2时,类型可选值为12 */
var xqdmc2Fenlei = ["12"];
/* 当选择选区10时,类型可选值为32 */
var xqdmc10Fenlei = ["32"];
/* 当选择选区11或12时,类型可选值为21,22 */
var xqdmc11_12Fenlei = ["21", "22"];
/* 监听选区名称下拉框改变事件 */
$("#xqdmc").change(function() {
/* 获取当前选中的选区名称 */
var xqdmc = $(this).val();
/* 根据选中的选区名称设置可选的分类 */
if (xqdmc === "1") {
defaultFenlei = xqdmc1Fenlei;
} else if (xqdmc === "2") {
defaultFenlei = xqdmc2Fenlei;
} else if (xqdmc === "10") {
defaultFenlei = xqdmc10Fenlei;
} else if (xqdmc === "11" || xqdmc === "12") {
defaultFenlei = xqdmc11_12Fenlei;
}
/* 重置分类复选框 */
$("input[name='fenlei']").prop("checked", false);
$("input[name='fenlei']").prop("disabled", true);
/* 设置默认可选的分类 */
$.each(defaultFenlei, function(index, value) {
$("input[name='fenlei'][value='" + value + "']").prop("checked", true);
$("input[name='fenlei'][value='" + value + "']").prop("disabled", false);
});
});
</script>
```
上述代码中,首先定义了默认可选的分类数组defaultFenlei和根据选中的选区名称设置可选的分类数组xqdmc1Fenlei、xqdmc2Fenlei、xqdmc10Fenlei、xqdmc11_12Fenlei,然后通过Thymeleaf的条件判断语句th:if和th:unless以及JavaScript监听下拉框改变事件来实现动态设置分类复选框的可选状态和默认选中状态的功能。对于已经选中的分类,通过设置th:checked属性为true来保持其选中状态,同时设置th:disabled属性为true来禁止其再次选择。
阅读全文