CODEWITHSUNDEEP
jqueryhtmlfunction
oliverbj
oliverbj

Reputation: 6052

jQuery Parent Function

I have this iPhone like checkbox script, which makes "beautiful" checkboxes. The code is like this:

$(document).ready( function(){ 
    $(".cb-enable").click(function(){
        var parent = $(this).parents('.switch');
        $('.cb-disable',parent).removeClass('selected');
        $(this).addClass('selected');
        $('.checkbox',parent).attr('checked', true);
    });
    $(".cb-disable").click(function(){
        var parent = $(this).parents('.switch');
        $('.cb-enable',parent).removeClass('selected');
        $(this).addClass('selected');
        $('.checkbox',parent).attr('checked', false);
    });
});

And the HTML: Yes No New personal message

                <p class="switch"> 
                <label class="cb-enable" ><span>Yes</span></label>
                <label class="cb-disable selected"><span>No</span></label>
                <div style="display:none;"><input type="checkbox" id="checkbox2" class="checkbox" name="notify_on_support" value="1" style="" /></div> 
                <label for="ticketreply" class="label" style="font-size:12px">Reply to support ticket</label><br />                    
                </p>

                <p class="switch"> 
                <label class="cb-enable"><span>Yes</span></label>
                <label class="cb-disable selected"><span>No</span></label>
                <div style="display:none;"><input type="checkbox" id="checkbox3" class="checkbox" name="notify_on_event" value="1" style="" /></div> 
                <label for="nevent" class="label" style="font-size:12px">New Events</label><br />
                </p>

                <p class="switch"> 
                <label class="cb-enable"><span>Yes</span></label>
                <label class="cb-disable selected"><span>No</span></label>
                <div style="display:none;"><input type="checkbox" id="checkbox4" class="checkbox" name="notify_on_pupdate" value="1" style="" /></div>
                <label for="pupdate" class="label" style="font-size:12px">Profile Update</label><br />                 
                </p>
            </div>

The problem here is, that only the FIRST part of the html (the first checkbox) works. The rest, the checkbox is not checked.

I guess it have something to do with the jQuery code, I am just not sure what.

Thanks in advance.

Upvotes: 0

Views: 571

Answers (2)

Anthony Grist
Anthony Grist

Reputation: 38345

The problem you have is that including a <div> element inside a <p> element isn't valid, so the browser is rendering them as siblings rather than rendering the <div> as a descendent of the <p> element. Then, obviously, your jQuery code doesn't find the <input> element, and the value never gets changed.

Simply removing the <div> element and applying the style="display:none;" attribute to the <input> element directly fixes the problem.

Working DEMO

Upvotes: 2

Adaz
Adaz

Reputation: 1665

I've added "for" attribute to your labels and I've changed the jQuery slightly:

http://jsfiddle.net/adaz/pHxyw/

Upvotes: 1

Related Questions