Label to control checkbox - html

Question

I've been playing around with the CSS hack to use <label for="".. to control the toggle for a checkbox. Here's a codepen.
When I add another <input>, it disallows the toggle for the checkbox. (When I remove the hidden input everything works fine)..
Are my css selectors accommodating for this hidden input? I may be missing something simple.
.checkbox-on-off {
position: relative;
display: inline-block;
width: 35px;
padding-right: 2px;
overflow: hidden;
vertical-align: middle;
margin-top: 10px;
}
/* this positions the check box label over the text box */
.checkbox-on-off input[type=checkbox] {
position: absolute;
opacity: 0;
}
/* makes the background blue */
.checkbox-on-off input[type=checkbox]:checked+label {
background-color: #167ac6;
}
/* this is the grey background check mark */
.checkbox-on-off label {
display: inline-block;
border: 1px solid transparent;
height: 15px;
width: 100%;
background: #b8b8b8;
cursor: pointer;
border-radius: 20px;
}
/* this adds / positions the check mark */
.checkbox-on-off input[type=checkbox]:checked+label .checked {
display: inline-block;
margin-top: 3px;
margin-left: 6px;
background-size: auto;
width: 10px;
height: 10px;
}
/* if you click the checkbox, it sometimes has a grey square */
.checkbox-on-off label .checked {
display: none;
}
.checkbox-on-off input[type=checkbox]:checked+label .unchecked {
display: none;
}
.checkbox-on-off label .unchecked {
display: inline-block;
float: right;
padding-right: 3px;
}
#autoplay-checkbox-label
.checkbox-on-off label {
display: inline-block;
border: 1px solid transparent;
height: 13px;
width: 100%;
background: #b8b8b8;
cursor: pointer;
border-radius: 20px;
}
/* this positions the white dot */
.checkbox-on-off input[type=checkbox]:checked+label .toggle {
float: right;
}
/* this is the actual white dot */
.checkbox-on-off label .toggle {
float: left;
background: #fbfbfb;
height: 15px;
width: 13px;
border-radius: 20px;
}
<span class="checkbox-on-off ">
<input id="autoplay-checkbox" class="" type="checkbox" checked="">
<input name="" type="hidden" value="false">
<label for="autoplay-checkbox" id="autoplay-checkbox-label">
<span class="checked"> </span>
<span class="unchecked"></span>
<span class="toggle"> </span>
</label>
</span>

Answer 1

The problem comes from this selector : input[type=checkbox]:checked+label
It means you are targetting label which is immediately after your input (element+element).
Problem is your hidden input is between checkbox and label.
Everything works if you place your hidden input :
before your checkbox,
after your label,
inside your label.
Live Demo with 3 hidden inputs
Update 1 :
In case you cannot modify HTML markup, you can move elements by jquery by adding $("input[type=hidden]").prependTo("#autoplay-checkbox");
This will move the hidden input before your checkbox
Updated exemple