CODEWITHSUNDEEP
jquerycsscheckbox
ChrisMJ
ChrisMJ

Reputation: 1620

input :checked & toggle() in jquery

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?

Upvotes: 0

Views: 1697

Answers (2)

Mrchief
Mrchief

Reputation: 76268

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/

Upvotes: 3

Karolis
Karolis

Reputation: 9582

Input elements can't have descendants. Maybe you mean input:checked (without space)?

Upvotes: 0

Related Questions