Question

Greetings,

Being new to jQuery’s syntax, I find myself being a bit thrown off when writing up some code. So while I realize my issue is very likely a logic issue, I’m still have issues finding it because of the syntax that I’m not used to.

I have a series of <li> tags that have an <input type="checkbox"> within each of them. When the page is refreshed, the checkboxes remain checked, however the <li> needs to keep the class of .grey attached still, but it loses it. Here is the code I’m trying to use at the moment to fix this issue:

$('#servemod').ready(function() {
    $('#servemod').find('li').each( function() {
    if ($('li').find('input:checkbox').attr('checked')==1) {
        /*alert($(this).find('input:checkbox'));*/
        /*alert($('li').find('input:checkbox').attr('checked'));*/
            $(this).addClass('grey');

    }
    });
});

I’m currently using the alert boxes to tell me exactly which part of the DOM the jQuery is currently looking at, and it seems okay. But the problem is that even with the loop, it only seems to test the first <li>‘s checked state. If the first one is checked, the loop goes through and turns ALL <li>‘s to blue. If the first one is not checked, it does nothing. I’m positive this is something very basic, but I’ve been at this for hours and I’m just not seeing it. Any help would be greatly appreciated.

The full code to the html section (with a lot of fluff pulled out)

<div id="servemod">
   <ul>
      <li><input type="checkbox"><p>box 1</p>
      <li><input type="checkbox"><p>box 2</p>
   </ul>
</div>

The css value for grey is just a colour change to blue.

Answer 1

    $(document).ready(function() {
      $('#servemod ul li input:checked').each( function() {
        $(this).closest('li').addClass('grey');
      });
});