Custom checkbox with hidden inputs not selecting properly. Javascript needs adjusting

Question

I am using custom checkboxes with the input hidden wrapped in a span; I have written a script to add the class for checked, but it doesn't actually mark the inputs as checked. What am I doing wrong here?

UPDATE: So the checkbox checks now! Hooray. A new problem is that hiding the visibility on the checkbox, also hides the new class when checked on the area of the checkbox... if the label is clicked, then the checkbox shows as checked, but if the checkbox image itself is clicked, nothing changes...

HTML

<fieldset>
  <label class="sublabel" title="Insights & Planning" for="checkbox-insights-and-planning">Insights & Planning</label>

  <span class="open-checkbox">
     <input id="checkbox-insights-and-planning" class="key-areas-checkbox" name="key-areas-of-interest" type="checkbox" />
  </span>
</fieldset>

CSS

.open-checkbox {
    background-position: -4px -48px;
    background-image: url(../images/adcolor-sprite.png);
    background-repeat: no-repeat;
    cursor: pointer;
    display: block;
    float: right;
    height: 25px;
    margin-top: 10px;
    width: 25px;
}

.checked {
    background-position: -4px -12px;
    background-image: url(../images/adcolor-sprite.png);
    background-repeat: no-repeat;
    cursor: pointer;
    display: block;
    float: right;
    height: 25px;
    margin-top: 10px;
    width: 25px;
}

input[type=checkbox] {
    visibility: hidden;
}

#key-areas-inputs label.sublabel {
    display: block;
    float: left;
    height: 44px;
    padding: 0 0 0 10px;
    width: 300px;
}
#key-areas-inputs input.key-areas-checkbox {
    float: right;
    display: block;
    clear: none;
    height: 22px;
    width: 22px;
    margin-top: 18px;
    margin-right: 4px;
    margin-bottom: 0px;
    margin-left: 0px;
}
#key-areas-label {
    font-family: "Futura W01 Bold", Arial, Helvetica, sans-serif;
    font-size: 16px;
    color: #df007c;
    display: block;
    clear: left;
    float: left;
    width: 348px;
    margin-top: 50px;
    margin-right: 0px;
    margin-bottom: 0px;
    margin-left: 0px;
    padding-top: 0px;
    padding-right: 30px;
    padding-bottom: 0px;
    padding-left: 0px;
    text-align: right;
}

JS

// check checked boxes on load     
    $(".key-areas-checkbox:checked").each(function(){
        $(this).next().addClass('checked');
    });

    // add class and checked attribute to filter inputs
    $('.open-checkbox').click(function () {
        console.log('click');
        var $this = $(this);
        var $input = $this.find('input');

        $this.toggleClass('checked', $input.is(':checked'));
        return;

        if($input.prop('checked')){
            $this.removeClass('checked');
        } else {
            $this.addClass('checked');
        }
    });

can you provide us with a jsfiddle

Venkata Krishna
– Venkata Krishna

2013-09-16 18:21:35 +00:00
Commented Sep 16, 2013 at 18:21 — Venkata Krishna
– Venkata Krishna, Commented Sep 16, 2013 at 18:21

pb2q · Accepted Answer · 2013-09-16 18:51:44Z

2

to check the checkbox add:

 $input.attr('checked','checked');

to uncheck:

$input.removeAttr('checked');

edited Sep 16, 2013 at 18:51

pb2q

59.9k19 gold badges150 silver badges152 bronze badges

answered Sep 16, 2013 at 18:29

Alex Art.

8,7813 gold badges32 silver badges50 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

keirog · Accepted Answer · 2013-09-16 18:23:02Z

1

Your for and ids don't match. Change your id to "checkbox-insights-and-planning" (was missing an 's') and it should work.

Also make sure your image path is correct (we can't test that with your example code as it's a relative path; I just tried it with a background-color and it worked).

answered Sep 16, 2013 at 18:23

keirog

2,1882 gold badges19 silver badges17 bronze badges

1 Comment

codeChris Over a year ago

This was helpful; however, hiding the checkbox with {visibility:hidden;} also hides the image swap...

codeChris · Accepted Answer · 2013-09-16 20:58:53Z

0

I figured out what the issue was. The JS was fine. The fix was to nest the inputs inside of the label and wrap inside of a div. This gave the desired effect.

answered Sep 16, 2013 at 20:58

codeChris

8953 gold badges18 silver badges33 bronze badges

Collectives™ on Stack Overflow

Custom checkbox with hidden inputs not selecting properly. Javascript needs adjusting

3 Answers 3

Comments

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related