html - thymeleaf 折断 :checked css style change

Question

我使用此处 [1] 中的一些代码实现了一个带有复选框的树。

树本身没有任何问题。然后我添加了 thymeleaf 标签以在提交外部表单时获取复选框:

<input type="checkbox" th:id="'cb_' + *{cellline.key}"/>
<label>
    <input type="checkbox" form="covariate_form" th:field="*{interfaceCommand.celllines}" th:value="*{cellline.key}"/>
<span></span>
</label>
<label th:for="'cb_' + *{cellline.key}" th:text="${cellline.key}"></label>                                

这在 th:block 中被调用了几次。

显示复选标记的 css 是(来自 [1]):

.acidjs-css3-treeview label input:checked + span::before{
    content: "\2714"; /* Checkmark */
    box-shadow: 0 0 2px rgba(0, 0, 0, .25) inset;
    opacity: 1;
}

css 输入(应该)看到带有 th:fied=interfaceCommand.. 的输入被选中，然后将内容设置为\2714(复选标记)。

问题是 thymeleaf 会为某些内部处理生成另一个输入:

<label>
    <input form="covariate_form" type="checkbox" value="22Rv1" id="celllines2" name="celllines">
    <input type="hidden" name="_celllines" value="on"><span></span>
</label>

在第三行中，您可以看到由 thymeleaf 生成的隐藏输入。这个隐藏的输入破坏了 css (input:checked) 选择器并且复选框没有被选中。因为 :checked css 选择器仅适用于前一个元素。

可能有几种解决方案，包括在检查上一个时将隐藏设置为检查(但这可能会破坏 thymeleaf 形式的东西)，或者以某种方式禁用隐藏输入(这会破坏 thymeleaf 的东西)。没有隐藏的输入行，一切都没有问题。

为了尝试一切，我创建了一个 jsfiddle [2](此处缺少自动选择所选复选框下方的复选框的 javascript 代码)

[1] http://experiments.wemakesites.net/css3-treeview-with-multiple-node-selection.html

[2] https://jsfiddle.net/Lnwoz21e/3/

Answer 1

实际答案

您可以将 label input:checked + span::before 选择器替换为 label input:checked ~ span::before 以使其工作。 + 选择器基本上会选择所有 span::before 紧接在选中输入之后的内容。然而，~ 只会选择每个 span::before 前面有一个已检查的输入元素。这意味着在“orig”输入复选框和跨度之间可以有一个/多个其他元素。

引用https://www.w3schools.com/cssref/css_selectors.asp有关 css 选择器的更多信息。

检查更新的 jsFiddle:https://jsfiddle.net/Lnwoz21e/7/

其他问题

ID 应该始终是唯一的。

The id global attribute defines a unique identifier (ID) which must be unique in the whole document. Its purpose is to identify the element when linking (using a fragment identifier), scripting, or styling (with CSS).

在您的情况下，多次使用 id 会破坏 TreeView 的功能(打开和关闭节点)。