Question

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

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

问题在于Spring表单：复选框标记输出然后看起来像这个

<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包围，所以基本上使用表单上的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
}

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

1 个答案: