CODEWITHSUNDEEP
jquerylabeljquery-selectorsclosesttargeting
Kirk Ross
Kirk Ross

Reputation: 7163

next().closest().parent() targeting dizziness

I have a checkbox input inside its label. I read this is okay to do. I also have a second checkbox nested inside that for absolute positioning issues. I have the inputs hidden so the labels are the click handlers. I want to make label-2 visible if label-1 is clicked, but they are in a list of many.

Fiddle: http://jsfiddle.net/kirkbross/tfKva/6/

<li>
 <label class="label-1">Label #1 (parent label so to speak)
    <input type="checkbox" class="checkbox-1"/> // when this is checked (its label clicked) make label-2 visible
        <label class="label-2">Label #2
            <input style="visibility:hidden;" class="checkbox-2" />
         </label>
</label>
</li>

This is my code which isn't working:

$("label").click(function() {
    $("input:checkbox").each(function() {
        if ($(this).prop("checked")) {
            $(this).next('.label-2').show(); // can't figure out how to get at the second "nested" label

        } else {
            $(this).next('.label-2').hide();
        }
    });
});

Upvotes: 0

Views: 60

Answers (0)

Related Questions