jQuery: Checking values of checkboxes on page (re)load.

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

Does this do what you want it to do?

jQuery(
  function($)
  {
    $('#servemod li :checked').closest('li').addClass('grey');
  }
);

P.S: This is supposed to replace the entire code snippet you posted.

Answer 2

Is it possible it's not working because you don't have the end input and li tags?

<li><input type="checkbox"><p>box 1</p></input></li>

Answer 3

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

Answer 4

The test in your if statement operates on every checkbox inside an li element in your entire document:

$('li').find('input:checkbox') // returns all of the matches in the document.

Additionally, most jQuery methods operate on and apply to sets of elements, but not attr: it only operates on the first element in the of matched elements, so your if clause only tests the first checkbox contained inside an li.

Since you only want to check relative to the <li> element (and since each <li> only contains a single checkbox), you can use $(this):

if($(this).find('input:checkbox').attr('checked') == 1) {
    $(this).addClass('grey');
}

Answer 5

Here is the working code in jsfiddle http://www.jsfiddle.net/T4BKw/

$('#servemod li').each(function(){
    if($(this).find(':checkbox').is(':checked')){
        $(this).addClass('grey');
    }

});