jQuery Checkbox selection and change class

Question

I have a form like this:

<form action='' onsubmit='void(0)' class="mainform">
                <label class="form3"><input type="checkbox"> One a fancy cross-browser styled checkbox</label>
                <label class="form3"><input type="checkbox"> two a fancy cross-browser styled checkbox</label>
                <label class="form3"><input type="checkbox"> Three a fancy cross-browser styled checkbox</label>
                <label class="form3"><input type="checkbox"> Four a fancy cross-browser styled checkbox</label>
                <label class="form3"><input type="checkbox"> Five a fancy cross-browser styled checkbox</label>
                <label class="form3"><input type="checkbox"> Six a fancy cross-browser styled checkbox</label>
                <label class="form3"><input type="checkbox"> Seven a fancy cross-browser styled checkbox</label>
                <label class="form3"><input type="checkbox"> eight a fancy cross-browser styled checkbox</label>
                <label class="form3"><input type="checkbox"> 9 a fancy cross-browser styled checkbox</label>
                <label class="form3"><input type="checkbox"> 10 a fancy cross-browser styled checkbox</label>
                <label class="form3"><input type="checkbox"> 11 a fancy cross-browser styled checkbox</label>
                <label class="form3"><input type="checkbox"> 12 a fancy cross-browser styled checkbox</label>
                <label class="form3"><input type="checkbox"> 13 a fancy cross-browser styled checkbox</label>
                <label class="form3"><input type="checkbox"> 14 a fancy cross-browser styled checkbox</label>
</form>

Now, I want to do this. When the user checks or unchecks a checkbox, I want to add/remove class to the label so that I can show different coloured text when teh checkbox is selected and when it is not.

I am trying to do it liek this:

$(document).ready(function(){
$('.form3').each(function(i,e) {
   if(checklist[i] == "")
    {
        $(this).find('input[type=checkbox]').attr('checked', false);
        $(this).appendTo($('form'));
        $(this).find('input[type=checkbox]').change(function() {
            $(this).closest('label').addClass("checkselected");
        });
        $(this).closest('label').removeClass("checkselected");

    }
    else
    {
        $(this).find('input[type=checkbox]').attr('checked', true);
        $(this).find('input[type=checkbox]').change(function() {
            $(this).closest('label').removeClass("checkselected");
        });
        $(this).closest('label').addClass("checkselected");
    }
});
});

Now I know that this maynot be the right way to do it because I am doing this inside the "$('.form3').each(function(i,e)"

This makes it work but only once. How can I make it work even with mulltiple clicks to the same checkbox.

James Allardice · Accepted Answer · 2011-10-06 09:42:53Z

4

If I've understood your question correctly, then what you're trying to do is bind a click event handler to all the checkboxes, and add/remove a class to parent label of the one that's been clicked. If that's correct, then you can do this:

$("input[type='checkbox']").change(function() {
   $(this).closest("label").toggleClass("someClass"); 
});

The toggleClass method removes the need to check whether or not the checkbox is checked. You can pass in a second argument to show whether or not the class should be added or removed, so if some of your checkboxes start off already checked, you may want to use that:

$("input[type='checkbox']").change(function() {
   $(this).closest("label").toggleClass("someClass", this.checked); 
});

Here's a working example of the above code.

answered Oct 6, 2011 at 9:42

James Allardice

166k22 gold badges335 silver badges315 bronze badges

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

1 Comment

ssdesign Over a year ago

Thanks, this works to solve the problem of adding and removing the class. I will post another question for what happens when I change the array values of 'checklist' when I check and uncheck the boxes.

Collectives™ on Stack Overflow

jQuery Checkbox selection and change class

1 Answer 1

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related