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" id="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,并默认是选中状态,其它值不可选。
时间: 2023-07-06 09:04:19 浏览: 92
springboot如何使用thymeleaf模板访问html页面
5星 · 资源好评率100%
可以使用Thymeleaf的条件判断语句和属性绑定来实现这个功能。具体实现步骤如下:
1. 在下拉框id="xqdmc"上绑定一个change事件,当下拉框的值改变时触发一个JavaScript函数。
2. 在JavaScript函数中,根据下拉框的值,动态修改name="fenlei"的可选值和默认选中状态。
3. 在Thymeleaf模板中,使用Thymeleaf的条件判断语句和属性绑定,根据不同的下拉框值,显示不同的复选框选项。
下面是一个示例代码,仅供参考:
HTML代码:
```html
<select id="xqdmc" onchange="changeFenlei()">
<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 class="col-sm-9">
<label th:if="${fenleiType == '1'}" th:each="dict : ${@dict.getType('xqd_jcy_lb')}" class="check-box">
<input name="fenlei" id="fenlei" type="checkbox" th:value="${dict.dictValue}" th:text="${dict.dictLabel}" checked>
</label>
<label th:if="${fenleiType == '2'}" th:each="dict : ${@dict.getType('xqd_jcy_lb')}" class="check-box">
<input name="fenlei" id="fenlei" type="checkbox" th:value="${dict.dictValue}" th:text="${dict.dictLabel}" th:checked="${dict.dictValue == '12'}" th:disabled="${dict.dictValue != '12'}">
</label>
<label th:if="${fenleiType == '10'}" th:each="dict : ${@dict.getType('xqd_jcy_lb')}" class="check-box">
<input name="fenlei" id="fenlei" type="checkbox" th:value="${dict.dictValue}" th:text="${dict.dictLabel}" th:checked="${dict.dictValue == '32'}" th:disabled="${dict.dictValue != '32'}">
</label>
<label th:if="${fenleiType == '11' || fenleiType == '12'}" th:each="dict : ${@dict.getType('xqd_jcy_lb')}" class="check-box">
<input name="fenlei" id="fenlei" type="checkbox" th:value="${dict.dictValue}" th:text="${dict.dictLabel}" th:checked="${dict.dictValue == '21' || dict.dictValue == '22'}" th:disabled="${dict.dictValue != '21' && dict.dictValue != '22'}">
</label>
</div>
```
JavaScript代码:
```javascript
function changeFenlei() {
var xqdmc = document.getElementById("xqdmc");
var fenlei = document.getElementById("fenlei");
var options = fenlei.getElementsByTagName("input");
// 根据下拉框的值,修改复选框的可选值和默认选中状态
if (xqdmc.value == "1") {
for (var i = 0; i < options.length; i++) {
options[i].disabled = false;
options[i].checked = (options[i].value == "11" || options[i].value == "12" || options[i].value == "13" || options[i].value == "14" || options[i].value == "15");
}
} else if (xqdmc.value == "2") {
for (var i = 0; i < options.length; i++) {
options[i].disabled = (options[i].value != "12");
options[i].checked = (options[i].value == "12");
}
} else if (xqdmc.value == "10") {
for (var i = 0; i < options.length; i++) {
options[i].disabled = (options[i].value != "32");
options[i].checked = (options[i].value == "32");
}
} else if (xqdmc.value == "11" || xqdmc.value == "12") {
for (var i = 0; i < options.length; i++) {
options[i].disabled = (options[i].value != "21" && options[i].value != "22");
options[i].checked = (options[i].value == "21" || options[i].value == "22");
}
}
}
```
注意:在Thymeleaf模板中,需要根据不同的下拉框值,使用Thymeleaf的条件判断语句和属性绑定来显示不同的复选框选项。在示例代码中,使用了Thymeleaf的if语句和th:checked、th:disabled属性来实现。
阅读全文