1

I am using the Spring form tag library in one of my projects and encountered the following problem:

I need to call a JavaScript function onmouseup on the label to a checkbox.

The problem is with the Spring form:checkbox tag the output then looks like this 

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

Due to my style.css which uses the + selector to get the label after a checked checkbox I need something like:

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

But because I want to call a function onmouseup on the label, the label attribute to the form:checkbox tag won't work either.

My input is surrounded by a div so basically using the label attribute on the form:checkbox with the onmouseup call on the div would work but it feels kinda hacky.

So to sum it up I need either a different way to get my CSS to work or a way to achieve the above mentioned HTML structure using Spring.

The CSS (the rest is just styling which should not be important but I will post it if it'll help just let me know):

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

.switch input[type="checkbox"]:checked + label{
    background-color: #fff;
}
BSMP
  • 4,596
  • 8
  • 33
  • 44
Marco Papula
  • 741
  • 2
  • 8
  • 18
  • .switch input[type="checkbox"]:checked + input + label:after{ left: 23px; } .switch input[type="checkbox"]:checked + input + label{ background-color: #A539BD; } Doesn't work either :S – Marco Papula May 03 '17 at 02:09
  • Marco, i'm a little bit confused.. you want to keep this HTML structure and use an CSS wich add some style just in the label after the checkbox is checked? – Diogo Bernardelli May 03 '17 at 04:26

1 Answers1

3

If I correctly understood your question, here is your solution: https://jsfiddle.net/DiogoBernardelli/rLutkcx0/

I added the input[type="hidden"] between checkbox and label.

The code will look like:

.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
}
Diogo Bernardelli
  • 321
  • 1
  • 10
  • If it doesn't helped you, add a comment and I will try to help you out. – Diogo Bernardelli May 03 '17 at 04:39
  • No this did it for me thanks a lot *-* but why does it only work with the [type="hidden"] and not without it (see my first comment on the question) :S – Marco Papula May 14 '17 at 13:49
  • If you want to do it without the hidden field or move it to after the label tag, just remove the "+ input[type="hidden"]" in our solution. You can learn about this "+" selector here: http://stackoverflow.com/questions/1139763/what-does-the-plus-sign-css-selector-mean – Diogo Bernardelli May 15 '17 at 18:32
  • the hidden input field is generated by the spring tag so it kinda has to be there :S ;D – Marco Papula May 21 '17 at 21:24
  • Gotcha. So, u will have to use the "+" selector do make it work. U can also try the ">" selector and remove the "input[type="hidden"]" from the code, maybe it will work either. Btw, don`t forget the vote up on my main answer haha. – Diogo Bernardelli May 22 '17 at 15:41
  • I'm ratrher new here it tells me that i can't upvote yet but i will do it as soon as I can :D – Marco Papula Jul 05 '17 at 13:45