チェックラジオをグループの他のフィールドも選択するにはどうすればいいですか？

Question

私は、フィールドのグループを持つ非常に長いフォームを持っています。ラジオフィールドが選択されているときは、同じdivの複数の「隠し」フィールドを選択し、それらの値を送信時に渡す必要があります。別のラジオが選択されている場合、これらの非表示フィールドは消去する必要があり、代わりに他のグループが選択されます。

グループA： -

例1ラジオ1は、同じDIV /フィールドセット内のすべての隠しフィールドを選択する選択され
ラジオ1（オン）
隠しフィールド1A（チェック）
隠しフィールド1B（チェック）
隠しフィールド1C（チェック）

グループB：
ラジオ2
隠しフィールド2A
隠しフィールド2B
隠しフィールド2C

例2 - ラジオ2は、同じDIV /フィールドセット内のすべての隠されたフィールドを選択する選択されラジオ1のすべてのフィールドが選択解除されている：

グループ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> 

私はフィールドセットまたは他の要素のグループこれらもできたが、私はちょうど休憩を選択するために、選択した無線を必要としますその同じグループのフォームフィールドのまた、グループとフィールドは動的に追加されるので、「すべてを捕まえる」タイプの機能を期待しています。

どうすればいいですか？

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>