如何让选中的无线电也 select 组中的其他字段？

Question

我有一个很长的表单，其中包含多组字段。当一个无线电字段被 selected 时，我需要它也 select 同一个 div 中的几个 "hidden" 字段，并在提交时传递这些值。如果另一个收音机被 selected，则这些隐藏字段需要清除，而另一组的收音机被 selected。

示例 1 - 无线电 1 是 selected，其中 select 所有隐藏字段都在同一 div/fieldset:

A组：
无线电 1（选中）
隐藏字段 1a（选中）
隐藏字段 1b（选中）
隐藏字段 1c（选中）

B组：
电台 2
隐藏字段 2a
隐藏字段 2b
隐藏字段 2c

示例 2 - 无线电 2 selected 其中 select 相同 div/fieldset 中的所有隐藏字段，所有无线电 1 字段已删除selected.:

A组：
收音机 1
隐藏字段 1a
隐藏字段 1b
隐藏字段 1c

B组：
无线电 2（选中）
隐藏字段 2a（选中）
隐藏字段 2b（选中）
隐藏字段 2c（选中）

视觉示例：

示例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>

我也可以将它们分组到字段集或其他元素中，但我只需要 selected 无线电到同一组中的 select 其余表单字段。此外，组和字段是动态添加的，所以我希望有一个 "catch all" 类型的函数...

我该怎么做？

Answer 1

检查单选元素的 change 事件，并将检查委托给 document，以便它可以处理动态元素。

$(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>

如何让选中的无线电也 select 组中的其他字段？

How to get checked radio to also select other fields in group?

jquery

forms

parent-child

checked

fieldset