如何在输入标签和隐藏字段之间放置标签元素？

Question

我在一个项目中使用了Spring表单标签库，遇到了如下问题：

我需要在标签上调用一个 JavaScript 函数 onmouseup 到一个复选框。

问题在于 Spring 表单：checkbox 标记输出然后看起来像这样

<input id="id" name="name" value="true" type="checkbox">
<input name="_name" value="on" type="hidden"> 
<label for="id" onmouseup="func()" >blabla</label>

由于我的 style.css 使用 + 选择器在选中复选框后获取标签，我需要类似：

<input id="id" name="name" value="true" type="checkbox">
<label for="id" onmouseup="func()" >blabla</label>
<input name="_name" value="on" type="hidden"> 

但是因为我想在标签上调用onmouseup函数，所以form:checkbox标签的label属性也不起作用。

我的输入被一个 div 包围，所以基本上使用 form:checkbox 上的 label 属性和 div 上的 onmouseup 调用会起作用，但感觉有点 hacky。

所以总结一下，我需要一种不同的方式来让我的 CSS 工作，或者需要一种使用 Spring 实现上述 HTML 结构的方式。

CSS（其余的只是样式，不应该很重要，但如果对我有帮助，我会发布它）：

.switch input[type="checkbox"]:checked + label:after{
    left: 23px;
}

.switch input[type="checkbox"]:checked + label{
    background-color: #fff;
}

Answer 1

如果我正确理解了您的问题，以下是您的解决方案：https://jsfiddle.net/DiogoBernardelli/rLutkcx0/

我在复选框和标签之间添加了input[type="hidden"]。

代码如下：

.switch input[type="checkbox"]:checked + input[type="hidden"] + label:after{
    left: 23px;
}

.switch input[type="checkbox"]:checked + input[type="hidden"] + label{
    background-color: #fff;
    color: #f00; //just to emphasize the label
}