I'm not sure if this is a WordPress specific issue but when I create a simple form as a widget in my sidebar the checkbox won't check when I click on the label. Strangely though, it does work when I've pulled the same form via get_template_part into my navigation. I want to use the 'checkbox hack' which relies upon the label being clickable. My form looks like:

<form action="http://email.littlefishfx.com/t/r/s/jijiat/" method="post">
    <p class="checks">
        <input id="fieldjtdktry-0" name="cm-fo-jtdktry" value="4469820" type="checkbox" /> <label for="fieldjtdktry-0"><span></span>Learn</label>
        <input id="fieldjtdktry-1" name="cm-fo-jtdktry" value="4469821" type="checkbox" /> <label for="fieldjtdktry-1"><span></span>Trade</label>
        <input id="fieldjtdktry-2" name="cm-fo-jtdktry" value="4469822" type="checkbox" /> <label for="fieldjtdktry-2"><span></span>Invest</label>
        <input id="fieldjtdktry-3" name="cm-fo-jtdktry" value="4469823" type="checkbox" /> <label for="fieldjtdktry-3"><span></span>Spend</label>
        <input id="fieldEmail" name="cm-jijiat-jijiat" type="email" required placeholder="Your email address" />
        <br />
        <button type="submit"><span>Subscribe</span></button>

Both forms can be found at littlefishfx.com/contact, one dropping down out of the main menu 'subscribe' button and another (same form) at the very bottom of the sidebar.

Any advice on why this might be happening? Same results in Chrome, Safari and Firefox (mac).

** EDIT **

If I wrap my check boxes in the label like

<label><input id="fieldjtdktry-0" name="cm-fo-jtdktry" value="4469820" type="checkbox" /><span></span>Learn</label>

Then label clicking works across the board. This looks a best practice solution (?) but leaves me stumped as to how to use the check box hack I was originally trying to implement. Here's the CSS that I've been working on:

input[type="checkbox"] {
input[type="checkbox"] + label span {
    display: inline-block;
    width: 20px;
    height: 20px;
    margin: -1px 6px 0 0;
    vertical-align: middle;
    background: url(images/checkbox-sprite.gif) left top no-repeat;
    cursor: pointer;
input[type="checkbox"]:checked + label span {
    background: url(images/checkbox-sprite.gif) right top no-repeat;

Okay, so in case this is of use to anyone else. The original checkbox hack tut that I was following came from here.

I've got around the issue that I was having in WordPress by wrapping my checkboxes in the labels like

<label><input id="fieldjtdktry-0" name="cm-fo-jtdktry" value="4469820" type="checkbox" /><span></span>Learn</label>

and then just tweaking the CSS selector to read

label input[type="checkbox"] + span {

instead of the original

input[type="checkbox"] + label span {

Works like a charm!


I had the same problem but your answer did not solve it. So, in case someone is still having this challenge, make sure the label for value tallies with the input's id. That solved it for me.

That is:

<label for="love">

<input type="checkbox" id="love"/>

credit: https://stackoverflow.com/questions/6712029/label-not-working-with-checkbox/#answer-6712054


Reload the page, click two and remember them. Then disable any CSS. You will see that they are checked. So something awkward is styling your check-box.

You can unload the CSS ...

... in Firefox by choosing "View" > "Page Style" > "No Style"

... in Chrome by installing the "WebDeveloper" extension and choose "CSS" > "Disable all CSS"

  • I'm getting the same result with all styles disabled Mike. The first instance of the form works fine when clicking the labels but when clicking on a label in the second instance the box doesn't check, the page just jumps up a little bit. – Kevin Nugent Jun 20 '14 at 13:23

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.