CODEWITHSUNDEEP
jquery
Stefan
Stefan

Reputation: 772

Problem with my initialize

could someone help me with this please, for some reason on page load the buttons all seem to be in the "on" position even though i have one checkbox "checked" and the other not checked.

The problem seems to be in the if/then of the initialize_slideCheck(). I guess I am misusing the next()???

How can I target only the .checkboxTrigger that is wrapped in the same div as the checkbox?

PAGE LOCATED HERE

Any help appreciated!


$(document).ready(function(){

                function initialize_slideCheck(){
                    var slideCheck = $('.slideCheck');

                    slideCheck.wrap("");
                    slideCheck.after("");

                    slideCheck.attr('style', 'display:block;');

                    if(slideCheck.is(':checked')){
                        $(this).next(".checkboxTrigger").css("left", "-8px");
                    }else if(slideCheck.not(':checked')){
                        $(this).next(".checkboxTrigger").css("left", "-40px");
                    } 

                }

                initialize_slideCheck();

                $(".checkboxTrigger").click(function(){

                    var position = $(this).position().left;

                    if(position == -8){
                        $(this).animate({"left": "-40px"}, 200);
                        $(this).prev('.slideCheck').attr('checked', '');
                    }
                    else if(position == -40){
                        $(this).animate({"left": "-8px"}, 200);
                        $(this).prev('.slideCheck').attr('checked', 'checked');
                    }

                });

            });

Upvotes: 0

Views: 125

Answers (3)

Rob Cowie
Rob Cowie

Reputation: 22619

This should do the trick. is() returns true if any of the elements in the set match the selector. In this case, the ':checked' condition will always eval to true.

function initialize_slideCheck() {
    $('.slideCheck')
        .wrap("<div class='checkboxWrapper rounded'></div>")
        .after("<a class='checkboxTrigger' href='#'></a>")
        .css({'display':'block'})
        .each(function(){
            var $this = $(this);
            if ( $this.is(':checked') ) {
                $this.nextAll('.checkboxTrigger').css({'left':'-8px'});
            } else {
                $this.nextAll('.checkboxTrigger').css({'left':'-40px'});
            }
        })
}

EDIT:

Also, your click handler on the checkboxTrigger element does not 'check' the checkbox correctly. Replace .attr('checked', '') with .attr('checked', false)

Upvotes: 1

esteuart
esteuart

Reputation: 1423

It's hard to tell for sure without seeing the HTML, but it looks to me that the problem is with your $(this).next(...) method calls within the initialize_slideCheck method. At this point this is the document, so next() will not get the element next to slideCheck. I think what you are probably trying to do is:

function initialize_slideCheck(){
    ...
    if(slideCheck.is(':checked')){
        slideCheck.next(".checkboxTrigger").css("left", "-8px");
    } else if(slideCheck.not(':checked')){
        slideCheck.next(".checkboxTrigger").css("left", "-40px");
    }
}

Note the change from $(this).next to slideCheck.next.

Upvotes: 0

user657496
user657496

Reputation:

next() selects the next sibling. Use nextAll('selector') instead. You can check the complete manual on nextAll() here. Same happens with prev(). Use prevAll() instead. You can read that manual here.

Upvotes: 0

Related Questions