如何获得选中的单选以同时选择组中的其他字段? [英] How to get checked radio to also select other fields in group?

问题描述

我的字段组很长.选择一个单选字段时，我还需要它在同一div中选择几个隐藏"字段，并在提交时传递这些值.如果选择了另一个收音机，则需要清除这些隐藏的字段，然后选择另一个组.

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.

示例1-选择了Radio 1，它选择了同一div/字段集中的所有隐藏字段:

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

A组
收音机1(已选中)
隐藏字段1a(已选中)
隐藏字段1b(已选中)
隐藏字段1c(已选中)

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

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

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

示例2-选择了Radio 2，它选择了同一div/字段集中的所有隐藏字段，取消选择了Radio 1的所有字段.

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

A组
电台1
隐藏字段1a
隐藏字段1b
隐藏字段1c

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

B组:
第2电台(已选中)
隐藏字段2a(已选中)
隐藏字段2b(已选中)
隐藏字段2c(已选中)

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

视觉示例:

Visual 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...

我该怎么办?

推荐答案

检查单选元素的change事件，并将检查委托给document，以便它可以与动态元素一起使用.

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>

这篇关于如何获得选中的单选以同时选择组中的其他字段?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！