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 "chec开发者_如何转开发ked" 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');
                    }

                });

            });

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)

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.

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.