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函数。

JavaScript函数selectAll获取所有名为option的复选框元素，并根据全选复选框的选中状态，将所有复选框的选中状态设置为相应的值

thymeleaf编写下拉框每个选项都有复选框下拉列表第一个为全选复选框点击全选再点击全取消