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

Question

我在我的一个项目中使用弹簧表格库，并遇到以下问题：

我需要将标签上的javascript函数onmouseup拨打到复选框。

问题与弹簧形式：复选框标记输出，然后看起来像

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

由于我的样式。

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

但是，由于我想在标签上调用函数onMouseup，因此标签属性为表单：复选框标签也无法正常工作。

我的输入被DIV所包围，因此基本上使用表单上的标签属性：带有DIV上的Mouseup调用的复选框可以使用，但感觉有点骇客。

为了总结一下，我需要一种不同的方法来使我的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
}