Clicking on a label does not check the switch

Question

I am trying to make a color picker by setting up html as follows:

<ol class="kleurenkiezer list-reset clearfix"> <li> <input type="radio" id="kleur_wit" name="kleurenkiezer" value="wit"> <label for="kleur_wit" style="background: white;"></label> </li> <li> <input type="radio" id="kleur_creme" name="kleurenkiezer" value="creme"> <label for="kleur_creme" style="background: #fffceb;"></label> </li> <li> <input type="radio" id="kleur_lichtbruin" name="kleurenkiezer" value="lichtbruin"> <label for="kleur_lichtbruin" style="background: #968272;"></label> </li> <li> <input type="radio" id="kleur_bordeauxrood" name="kleurenkiezer" value="bordeauxrood"> <label for="kleur_bordeauxrood" style="background: #941514;"></label> </li> <li> <input type="radio" id="kleur_oudgroen" name="kleurenkiezer" value="oudgroen"> <label for="kleur_oudgroen" style="background: #7fa298;"></label> </li> <li> <input type="radio" id="kleur_lichtblauw" name="kleurenkiezer" value="lichtblauw"> <label for="kleur_lichtblauw" style="background: #487eae;"></label> </li> <li> <input type="radio" id="kleur_oudgeel" name="kleurenkiezer" value="oudgeel"> <label for="kleur_oudgeel" style="background: #b79130;"></label> </li> <li> <input type="radio" id="kleur_zwart" name="kleurenkiezer" value="zwart"> <label for="kleur_zwart" style="background: #000;"></label> </li> </ol> 

What I'm trying to do is make the actual switch invisible to the user and make the shortcut interactive so that I have a neat list of colored squares that you can choose from. Now my switch is not checked. Why will it be?

My css:

 .kleurenkiezer { width: 165px; margin-left: -10px; float: right; } .kleurenkiezer li { position: relative; width: 45px; height: 45px; margin: 0 0 10px 10px; border: 1px solid #bbbbbb; float: left; } .kleurenkiezer li input { position: absolute; top: 10px; left: 10px; z-index: 1000; } .kleurenkiezer li label { position: absolute; top: 0; left: 0; width: 43px; height: 43px; } 

Answer 1

A new answer to a really old question .. :) I'm not sure if this is your case, but I experience the exact same problem when I click the tags on the page where there are two duplicate forms, one of which is always hidden. One is used for the page area for mobile devices, the other for desktop devices.

The one that first appears in the html stream works fine and the other doesn't. Fake example, see Js script:

 <input type="radio" id="value-1" name="sort"/> <label for="value-1">value 1</label> <input type="radio" id="value-2" name="sort"/> <label for="value-2">value 2</label> <input type="radio" id="value-1" name="sort"/> <label for="value-1">value 1</label> <input type="radio" id="value-2" name="sort"/> <label for="value-2">value 2</label> 

https://jsfiddle.net/stratboy/8ua16gm3/1/

So now for me the trick is to find a way to avoid duplicating the form.

Answer 2

The switch works for me. You can check the css display: none for input checkbox:

 .kleurenkiezer input[type=radio] { display:none } 

Answer 3

For the same (colorpicker), I used a different approach, and I think it is easier. Just replace the form with a list of buttons and build 1 function in which you pass the color. this is something like this:

 <li class="color-box"><button type="button" class="color-btn" style="background-color:#BDC3C7;" onclick="wFontColour('#BDC3C7')"></button></li> 

then in your function you do everything you need with this color, in my case it looks like this:

 function wFontColour(fontColour) { document.execCommand("foreColor", false, fontColour); }; 

if you want to keep your approach, give the shortcut an identifier and try the following:

 $('#myLabel').each('click', function(){ $(this).closest('input:radio').attr('checked', 'checked'); });