Question

Hello all Im stuck with some code hoping to get help. I have my html set up like so:

     <div class="menu_options">
           <div class="parent_options">
               <input type="checkbox" class="parent_required" />
           </div>
           <div class="children">
                 <div class="child_options">
                      <input type="checkbox" class="child_required" />   
                 </div>
                 <div class="child_options">
                      <input type="checkbox" class="child_required" />   
                 </div>
                 <div class="child_options">
                      <input type="checkbox" class="child_required" />   
                 </div>
           </div>
      </div>

Basically what im trying to do is in jquery if the parent_required class checkbox is checked get all the input fields under the children class and all input fields class by child_required uncheck them.

I cannot use id’ on the input fields because i just dont know all the id’s for the fields to use.

so far in jquery i have this code

      $('.parent_required').click(function() {

            if(!$(this).is(":checked")) {
                var child = $(this).parent('.parent_options').siblings('.children');

            }
        });

and im suck here at the div class=’children part dont know how to get deeper in.

Answer 1

Try this:

$('.parent_required').click(function() {
    if (!$(this).is(":checked")) {
        $(this).closest('.parent_options')
            .siblings('.children')
            .find('.child_required')
            .prop('checked', false);
    }
});

Example fiddle