Problem with my initialize

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

                });

            });

Rob Cowie · Accepted Answer · 2011-05-17 23:43:53Z

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)

edited May 17, 2011 at 23:43

answered May 17, 2011 at 23:28

Rob Cowie

22.6k6 gold badges65 silver badges58 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Stefan Over a year ago

Wow Mr. Cowie thank you very much for the help, it worked! im sure by looking at my code you can tell that I am new to this, I didnt even know that we could stack .wrap, .after etc one on top another like that. Just looking at your code shows me just how far I am from being a programmer, Thanks again!

Rob Cowie Over a year ago

@user548906 No problem. jQuery is easy when you get the hang of it. Stick with it.

user657496 · Accepted Answer · 2011-05-17 21:48:23Z

0

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.

answered May 17, 2011 at 21:48

user657496

1 Comment

Stefan Over a year ago

Thanks for the help, I tried nextAll and am still having no luck. I have updated the OP with a link to the example page I am working on, do you think you could take a quick peek?

esteuart · Accepted Answer · 2011-05-17 21:54:29Z

0

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.

answered May 17, 2011 at 21:54

esteuart

1,4332 gold badges13 silver badges15 bronze badges

1 Comment

Stefan Over a year ago

Hmm I gave this a shot and still no dice, I have updated the OP with a link to the page I am working on, could you please take a quick peek? Disregard the CSS, its just to show the checkbox that will be hidden once this thing works correctly.

Collectives™ on Stack Overflow

Problem with my initialize

3 Answers 3

2 Comments

1 Comment

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

2 Comments

1 Comment

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related