0

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();
        }
    });
});
Jonas
  • 121,568
  • 97
  • 310
  • 388
Kirk Ross
  • 6,413
  • 13
  • 61
  • 104
  • take a look at the nth-child jquery selector: https://api.jquery.com/nth-child-selector/ – Jorge Zuverza Jun 11 '14 at 22:34
  • Then You need to add unique class or id dynamically to the Input field and label (label-2), Next onclick of lable you will get that unique class or Id and then you can show or hide that element. – vani saladhagu Jun 11 '14 at 22:42
  • You should fix your HTML structure. Semantically this is a terrible way to go about it. Use a `
    `
     – Zach Saucier Jun 11 '14 at 23:03
  • 1
    it can be simply like this http://jsfiddle.net/viphalongpro/tfKva/8/ , looks like the hidden inputs are text fields but you add class `checkbox-2` for them, which is really confusing. – King King Jun 11 '14 at 23:05

0 Answers0