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,并默认是选中状态,其它值不可选。
时间: 2023-07-06 15:04:23 浏览: 56
您可以使用Thymeleaf的条件判断语句th:if和th:unless来实现此功能,代码示例如下:
```
<div class="form-group">
<label class="col-sm-3 control-label">下拉框</label>
<div class="col-sm-9">
<select id="xqdmc" name="xqdmc" onchange="changeSelection()">
<option value="">请选择</option>
<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" th:with="type=${@dict.getType('xqd_jcy_lb')}">
<label class="col-sm-3 control-label">复选框</label>
<div class="col-sm-9">
<label th:each="dict : ${type}" class="check-box">
<input type="checkbox" name="fenlei" th:value="${dict.dictValue}" th:text="${dict.dictLabel}" th:checked="${#strings.contains(#strings.split(fenlei, ','), dict.dictValue)}" th:disabled="${#strings.contains(#strings.split(fenlei, ','), dict.dictValue) and #strings.length(#strings.split(fenlei, ',')) == 1}">
</label>
</div>
</div>
<script th:inline="javascript">
function changeSelection() {
var xqdmc = document.getElementById("xqdmc").value;
var fenlei = "";
if (xqdmc == "1") {
fenlei = "11,12,13,14,15";
} else if (xqdmc == "2") {
fenlei = "12";
} else if (xqdmc == "10") {
fenlei = "32";
} else if (xqdmc == "11" || xqdmc == "12") {
fenlei = "21,22";
}
document.getElementsByName("fenlei").forEach(function(element) {
element.checked = fenlei.split(",").includes(element.value);
element.disabled = !fenlei.split(",").includes(element.value);
});
}
</script>
```
解释:
1. 首先添加一个下拉框,用于选择要显示的复选框选项。当下拉框的值改变时,调用changeSelection()函数。
2. 添加一个包含复选框的div,使用th:with加载字典表中的选项,并使用th:each指令遍历生成多个复选框。
3. 在复选框中,使用th:checked指令设置默认选中状态,使用th:disabled指令设置不可选状态。其中,th:checked指令使用#strings.contains和#strings.split函数来判断当前选项是否在已选选项中,th:disabled指令使用#strings.contains和#strings.length函数来判断当前选项是否是唯一已选选项。
4. 在script标签中添加changeSelection()函数,根据下拉框的值来设置可选和默认选中的复选框选项。具体实现如下:
- 如果下拉框的值为1,复选框可选的值为11,12,13,14,15,并默认选中。
- 如果下拉框的值为2,复选框可选的值为12,并默认选中。
- 如果下拉框的值为10,复选框可选的值为32,并默认选中。
- 如果下拉框的值为11或12,复选框可选的值为21,22,并默认选中。
注意:在Thymeleaf中,要使用双引号将JavaScript代码包含在th:inline="javascript"指令中,否则会出现语法错误。