Thymeleaf 下拉框全选复选框实现 - 点击全选/取消 - 常规

Thymeleaf 下拉框全选复选框实现 - 点击全选/取消

本文将介绍如何使用 Thymeleaf 模板引擎创建一个包含全选复选框的下拉框，点击全选复选框可以选中或取消所有选项。

代码示例

<!DOCTYPE html>
<html xmlns:th='http://www.thymeleaf.org'>
<head>
    <meta charset='UTF-8'>
    <title>下拉框示例</title>
</head>
<body>
    <form>
        <select id='mySelect' multiple='multiple'>
            <option value='selectAll' th:onclick=''selectAll(this)''>全选</option>
            <option value='option1'><input type='checkbox' name='option' value='option1' onclick='event.stopPropagation()'>选项1</option>
            <option value='option2'><input type='checkbox' name='option' value='option2' onclick='event.stopPropagation()'>选项2</option>
            <option value='option3'><input type='checkbox' name='option' value='option3' onclick='event.stopPropagation()'>选项3</option>
        </select>
    </form>

    <script>
        function selectAll(selectAllCheckbox) {
            var checkboxes = document.getElementsByName('option');
            if (selectAllCheckbox.checked) {
                for (var i = 0; i < checkboxes.length; i++) {
                    checkboxes[i].checked = true;
                }
            } else {
                for (var i = 0; i < checkboxes.length; i++) {
                    checkboxes[i].checked = false;
                }
            }
        }
    </script>
</body>
</html>

代码解释

Thymeleaf 语法: 在下拉列表的第一个选项中添加了 th:onclick=''selectAll(this)''，用于在点击全选复选框时调用 selectAll 函数。
JavaScript 函数: selectAll 函数获取所有名为 option 的复选框元素，并根据全选复选框的选中状态，将所有复选框的选中状态设置为相应的值。

功能说明

使用 multiple='multiple' 属性将下拉框设置为多选模式。
通过 th:onclick 属性将点击事件绑定到全选复选框。
使用 event.stopPropagation() 阻止点击事件冒泡，避免点击复选框时也触发下拉框的选项选择事件。
通过 JavaScript 代码控制所有选项的选中状态。

总结

通过 Thymeleaf 和 JavaScript 的组合，可以轻松实现一个包含全选复选框的下拉框，方便用户快速选择多个选项。