thymeleaf中th:checked

在Thymeleaf模板引擎中，`th:checked` 是用于处理HTML表单中的复选框的属性。

使用 `th:checked` 属性可以根据条件来决定是否选中复选框。它接受一个布尔值，当该值为 true 时，复选框将被选中；当该值为 false 时，复选框将不被选中。

以下是 `th:checked` 的用法示例：

<input type="checkbox" th:checked="${isChecked}">

在上面的示例中，`${isChecked}` 是一个Thymeleaf变量，表示一个布尔值。如果 `isChecked` 为 true，则复选框将被选中；如果 `isChecked` 为 false，则复选框将不被选中。

您可以根据自己的业务逻辑来设置 `isChecked` 变量的值，以控制复选框的选中状态。

请注意，`th:checked` 属性只能用于处理复选框的选中状态，对于其他类型的表单元素（如单选按钮、下拉列表等），需要使用不同的Thymeleaf属性进行处理。

相关问题

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实现上述处理逻辑。具体代码如下：

<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来禁止其再次选择。

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,并默认是选中状态,其它值不可选。

可以使用Thymeleaf的条件判断语句和属性绑定来实现这个功能。具体实现步骤如下：

1. 在下拉框id="xqdmc"上绑定一个change事件，当下拉框的值改变时触发一个JavaScript函数。

2. 在JavaScript函数中，根据下拉框的值，动态修改name="fenlei"的可选值和默认选中状态。

3. 在Thymeleaf模板中，使用Thymeleaf的条件判断语句和属性绑定，根据不同的下拉框值，显示不同的复选框选项。

下面是一个示例代码，仅供参考：

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代码：

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属性来实现。