如何在两个div区块中获取各自单选按钮的选中值

页面中有两个区块分别对应「主菜」和「主酱汁」分类，希望能同时选中两个分类下的单选按钮（比如「孜然米饭」和「蔬菜咖喱」），但当前代码仅能选中一个，同时需要获取格式为[['主菜', 2], ['主酱汁', 7]]的选中结果。

原代码如下：

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
<div class="row">
  <div class="col-sm-6" style="background-color:lightcyan;">
    <!-- Main Title like Min course,Gravy -->
    <h4 class="p-3 m-0 bg-light w-100" style="color:red">Main Course </h4>
    <input type="hidden" class="form-control buffetCategory" value="Main Course">
    <!-- needs to take value from here-->
    <div class="col-md-12 px-0 border-top">
      <div class="d-flex gap-2 p-3 border-bottom gold-members">
        <input type="radio" name="buffetSelection" class="form-check-input buffetSelection" value="1">
        <div>
          <h5 class="mb-1">Biryani Rice</h5>
        </div>
      </div>
    </div>

    <div class="col-md-12 px-0 border-top">
      <div class="d-flex gap-2 p-3 border-bottom gold-members">
        <input type="radio" name="buffetSelection" class="form-check-input buffetSelection" value="2">
        <div>
          <h5 class="mb-1">Jeera Rice</h5>
        </div>
      </div>
    </div>
  </div>

  <div class="col-sm-6" style="background-color:lightcyan;">
    <!-- Main Title like Min course,Gravy -->
    <h4 class="p-3 m-0 bg-light w-100" style="color:red">Main Gravy </h4>
    <input type="hidden" class="form-control buffetCategory" value="Main Gravy">
    <!-- needs to take value from here-->
    <div class="col-md-12 px-0 border-top">
      <div class="d-flex gap-2 p-3 border-bottom gold-members">
        <input type="radio" name="buffetSelection" class="form-check-input buffetSelection" value="6">
        <div>
          <h5 class="mb-1">Vegetable Dalcha</h5>
        </div>
      </div>
    </div>

    <div class="col-md-12 px-0 border-top">
      <div class="d-flex gap-2 p-3 border-bottom gold-members">
        <input type="radio" name="buffetSelection" class="form-check-input buffetSelection" value="7">
        <div>
          <h5 class="mb-1">Vegetable Kurma</h5>
        </div>
      </div>
    </div>
    <div class="col-md-12 px-0 border-top">
      <div class="d-flex gap-2 p-3 border-bottom gold-members">
        <input type="radio" name="buffetSelection" class="form-check-input buffetSelection" value="8">
        <div>
          <h5 class="mb-1">Vegetable Dalcha</h5>
        </div>
      </div>
    </div>

  </div>
</div>

<button type="button" class="btn btn-theme text-white fw-bold w-100" onclick="get_buffetDetails()">PROCEED</button>

<script>
  function get_buffetDetails() {
    var selectedbuffet = $('input[name=buffetSelection].buffetSelection:checked').val();

    console.log(selectedbuffet);
  }
</script>

修改方案 #

1. 调整单选按钮的name属性 #

单选按钮的name属性决定了互斥组，同一name的单选按钮只能选一个。因此需要给不同分类下的单选按钮设置不同的name：

• 「主菜」分类下的单选按钮name设为buffetSelection-MainCourse
• 「主酱汁」分类下的单选按钮name设为buffetSelection-MainGravy

2. 修改获取选中值的函数 #

遍历每个分类区块，获取分类名称和对应选中的单选按钮值，整理成目标格式。

修改后的完整代码：

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
<div class="row">
  <div class="col-sm-6" style="background-color:lightcyan;">
    <h4 class="p-3 m-0 bg-light w-100" style="color:red">主菜</h4>
    <input type="hidden" class="form-control buffetCategory" value="主菜">
    <div class="col-md-12 px-0 border-top">
      <div class="d-flex gap-2 p-3 border-bottom gold-members">
        <input type="radio" name="buffetSelection-MainCourse" class="form-check-input buffetSelection" value="1">
        <div>
          <h5 class="mb-1">印度香饭</h5>
        </div>
      </div>
    </div>

    <div class="col-md-12 px-0 border-top">
      <div class="d-flex gap-2 p-3 border-bottom gold-members">
        <input type="radio" name="buffetSelection-MainCourse" class="form-check-input buffetSelection" value="2">
        <div>
          <h5 class="mb-1">孜然米饭</h5>
        </div>
      </div>
    </div>
  </div>

  <div class="col-sm-6" style="background-color:lightcyan;">
    <h4 class="p-3 m-0 bg-light w-100" style="color:red">主酱汁</h4>
    <input type="hidden" class="form-control buffetCategory" value="主酱汁">
    <div class="col-md-12 px-0 border-top">
      <div class="d-flex gap-2 p-3 border-bottom gold-members">
        <input type="radio" name="buffetSelection-MainGravy" class="form-check-input buffetSelection" value="6">
        <div>
          <h5 class="mb-1">蔬菜豆酱</h5>
        </div>
      </div>
    </div>

    <div class="col-md-12 px-0 border-top">
      <div class="d-flex gap-2 p-3 border-bottom gold-members">
        <input type="radio" name="buffetSelection-MainGravy" class="form-check-input buffetSelection" value="7">
        <div>
          <h5 class="mb-1">蔬菜咖喱</h5>
        </div>
      </div>
    </div>
    <div class="col-md-12 px-0 border-top">
      <div class="d-flex gap-2 p-3 border-bottom gold-members">
        <input type="radio" name="buffetSelection-MainGravy" class="form-check-input buffetSelection" value="8">
        <div>
          <h5 class="mb-1">蔬菜豆酱</h5>
        </div>
      </div>
    </div>

  </div>
</div>

<button type="button" class="btn btn-theme text-white fw-bold w-100" onclick="get_buffetDetails()">继续</button>

<script>
  function get_buffetDetails() {
    var result = [];
    // 遍历每个分类区块
    $('.col-sm-6').each(function() {
      var category = $(this).find('.buffetCategory').val();
      var selectedValue = $(this).find('.buffetSelection:checked').val();
      if (selectedValue) {
        result.push([category, parseInt(selectedValue)]);
      }
    });
    console.log(result);
    // 输出格式：[['主菜', 2], ['主酱汁', 7]]
  }
</script>

说明 #

• 每个分类内的单选按钮保持互斥，不同分类可同时选中
• 函数通过遍历分类容器，获取每个分类的隐藏域值（分类名称）和对应选中的单选按钮值，最终组合成目标数组格式
• 已将英文文本翻译成中文，更符合使用场景

内容的提问来源于stack exchange，提问作者Divya