Question

In my jquery i have the following code, which for some reason is not working as i expected. On testing the code doesn’t perform the css changes. If i remove the :checked and just have $(“input”) then the css works but only on the clicking of a input:checkbox

$("input :checked").toggle(function() {
    // Stuff to do every *odd* time the element is clicked;
    $(this).siblings('a').css("text-decoration","line-through");
    $(this).siblings('a').css("color","#aaa");
    $(this).parent('li').css("background-color","#ccc");
}, function() {
    // Stuff to do every *even* time the element is clicked;
    $(this).siblings('a').css("text-decoration","none");
    $(this).siblings('a').css("color","");
    $(this).parent('li').css("background-color","");
});

What am I missing?

Answer 1

Try this:

$('input:checkbox').click(function() {
    if($(this).is(':checked')) {
      // Stuff to do every *odd* time the element is clicked;
      $(this).siblings('a').css("text-decoration","line-through");
      $(this).siblings('a').css("color","#aaa");
      $(this).parent('li').css("background-color","#ccc");
    } 
    else {
      // Stuff to do every *even* time the element is clicked;
      $(this).siblings('a').css("text-decoration","none");
      $(this).siblings('a').css("color","");
      $(this).parent('li').css("background-color","");
    }
});

Here’s a jsfiddle for this: http://jsfiddle.net/AwMf3/