Question

I am new to learning jquery so my apologies if this is a relatively easy question.
I have an asp.net checkboxlist with an ID of ChartstoDisplay. I am trying to create jquery to toggle the style back and forth dependent on whether an individual list item checkbox is checked. The code i have is below, the style ‘selected’ should be changed the checkboxes that are checked to bold green text but nothing happens.

<script type="text/javascript">
    $(document).ready(function () {
        $('#ChartstoDisplay').click(function () {
            $('input').each(function () {
                if ($(this).is(':checked'))
                    $(this).toggleClass("selected");
            });
        });

    });
</script>

My understanding is that the ‘input’.each is iterating through the items in the checkbox list looking for input tags, then the next line, using the this variable, checks for whether or not the checkbox is checked, if so it should be changing it’s style.

Answer 1

There must be something else, because your code seems to be valid, just couple of best practices:

<script type="text/javascript">
    $(document).ready(function () {
        $('#ChartstoDisplay').click(function () {
            $('input[type="checkbox"]:checked', this).toggleClass("selected");
        });
     });
</script>

• Don’t select all the inputs, select only checkboxes.
• Select only checkboxes under the clicked list.
• Use the :checked selector to remove the filtering checks.

DEMO