How to get checked radio to also select other fiel

Question

I have a very long form with groups of fields. When a radio field is selected, I need it to also select several "hidden" fields in the same div and to pass those values on submission. If another radio is selected, than these hidden fields need to clear, and instead the other group's are selected.

Example 1 - Radio 1 is selected which selects all hidden fields in same div/fieldset:

Group A:
Radio 1 (checked)
Hidden Field 1a (checked)
Hidden Field 1b (checked)
Hidden field 1c (checked)

Group B:
Radio 2
Hidden Field 2a
Hidden Field 2b
Hidden field 2c

Example 2 - Radio 2 is selected which selects all hidden fields in same div/fieldset, all of Radio 1 fields are deselected.:

Group A:
Radio 1
Hidden Field 1a
Hidden Field 1b
Hidden field 1c

Group B:
Radio 2 (checked)
Hidden Field 2a (checked)
Hidden Field 2b (checked)
Hidden field 2c (checked)

Visual Example:

Example HTML:

<div class="item">
    <h3>Item 1</h3>
    <div class="item-1-set options-set-a">
        <div class="checkbox-wrapper">
            <label for="item-1-a">Item 1, Options Set A Label</label>
            <input id="item-1-a" name="item-1" type="radio" value="Item 1 A"> 
        </div>
        <input name="item-1-a-entryid" type="checkbox" value="Item 1 A ID" class="hidden">
        <input name="item-1-a-title" type="checkbox" value="Item 1 A Title" class="hidden">
        <input name="item-1-a-image" type="checkbox" value="Item 1 Image URL" class="hidden">
    </div>
    <div class="item-1-set options-set-b">
        <div class="checkbox-wrapper">
            <label for="item-1-b">Item 1, Options Set B Label</label>
            <input id="item-1-b" name="item-1" type="radio" value="Item 1 B"> 
        </div>
        <input name="item-1-b-entryid" type="checkbox" value="Item 1 B ID" class="hidden">
        <input name="item-1-b-title" type="checkbox" value="Item 1 B Title" class="hidden">
        <input name="item-1-b-title" type="checkbox" value="Item 1 B Image URL" class="hidden">
    </div>
</div>

<div class="item">
    <h3>Item 2</h3>
    <div class="item-2-set options-set-a">
        <div class="checkbox-wrapper">
            <label for="item-2-a">Item 2, Options Set A Label</label>
            <input id="item-2-a" name="item-2" type="radio" value="Item 2 A"> 
        </div>
        <input name="item-2-a-entryid" type="checkbox" value="Item 2 A ID" class="hidden">
        <input name="item-2-a-title" type="checkbox" value="Item 2 A Title" class="hidden">
        <input name="item-2-a-image" type="checkbox" value="Item 2 Image URL" class="hidden">
    </div>
    <div class="item-2-set options-set-b">
        <div class="checkbox-wrapper">
            <label for="item-2-b">Item 2, Options Set B Label</label>
            <input id="item-2-b" name="item-2" type="radio" value="Item 2 B"> 
        </div>
        <input name="item-2-b-entryid" type="checkbox" value="Item 2 B ID" class="hidden">
        <input name="item-2-b-title" type="checkbox" value="Item 2 B Title" class="hidden">
        <input name="item-2-b-title" type="checkbox" value="Item 2 B Image URL" class="hidden">
    </div>
</div>

I could also group these in a fieldset or other element, but I just need the selected radio to select the rest of the form fields in that same group. Also, the groups and fields are added dynamically, so I'm hoping for a "catch all" type of function...

How could I do this?

Answer 1

Check the change event of the radio elements, and delegate the checks to the document so it will work with dynamic elements.

$(document).on('change', '.checkbox-wrapper input[type="radio"]', function() {
  $(this)
    .closest('.item')
    .find('.checkbox-wrapper')
    .each(function() {
      var checkboxes = $(this).siblings('input[type="checkbox"]'),
        radio = $('input[type="radio"]', this).get(0);

      checkboxes.prop('checked', radio.checked);
    });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div class="item">
  <h3>Item 1</h3>
  <div class="item-1-set options-set-a">
    <div class="checkbox-wrapper">
      <label for="item-1-a">Item 1, Options Set A Label</label>
      <input id="item-1-a" name="item-1" type="radio" value="Item 1 A">
    </div>
    <input name="item-1-a-entryid" type="checkbox" value="Item 1 A ID" class="hidden">
    <input name="item-1-a-title" type="checkbox" value="Item 1 A Title" class="hidden">
    <input name="item-1-a-image" type="checkbox" value="Item 1 Image URL" class="hidden">
  </div>
  <div class="item-1-set options-set-b">
    <div class="checkbox-wrapper">
      <label for="item-1-b">Item 1, Options Set B Label</label>
      <input id="item-1-b" name="item-1" type="radio" value="Item 1 B">
    </div>
    <input name="item-1-b-entryid" type="checkbox" value="Item 1 B ID" class="hidden">
    <input name="item-1-b-title" type="checkbox" value="Item 1 B Title" class="hidden">
    <input name="item-1-b-title" type="checkbox" value="Item 1 B Image URL" class="hidden">
  </div>
</div>

<div class="item">
  <h3>Item 2</h3>
  <div class="item-2-set options-set-a">
    <div class="checkbox-wrapper">
      <label for="item-2-a">Item 2, Options Set A Label</label>
      <input id="item-2-a" name="item-2" type="radio" value="Item 2 A">
    </div>
    <input name="item-2-a-entryid" type="checkbox" value="Item 2 A ID" class="hidden">
    <input name="item-2-a-title" type="checkbox" value="Item 2 A Title" class="hidden">
    <input name="item-2-a-image" type="checkbox" value="Item 2 Image URL" class="hidden">
  </div>
  <div class="item-2-set options-set-b">
    <div class="checkbox-wrapper">
      <label for="item-2-b">Item 2, Options Set B Label</label>
      <input id="item-2-b" name="item-2" type="radio" value="Item 2 B">
    </div>
    <input name="item-2-b-entryid" type="checkbox" value="Item 2 B ID" class="hidden">
    <input name="item-2-b-title" type="checkbox" value="Item 2 B Title" class="hidden">
    <input name="item-2-b-title" type="checkbox" value="Item 2 B Image URL" class="hidden">
  </div>
</div>