Question

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');
                    }

                });

            });

Answer 1

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)