javascript - 如何使用jQuery获取多个单选按钮组的值

Question

我正在制作一份餐饮订单，我希望用户能看到他们订购了什么。该表单由 11 个不同的包组成，因此为每个包硬编码并不是一个好主意。每个包裹都有主菜、沙拉和送货时间，并使用单选按钮。这是我的 HTML 代码。 (我删除了一些行以减少此处的代码量) 谢谢!

    <form id="orderForm">
<!--     first package-->
        <div>
            <h3> First Package</h3>
            <div>
                <input type="radio" name="Entree Item" value="Mustang Hot Dog"> Mustang Hot Dog <br>
                <input type="radio" name="Entree Item" value="Nacho Station"> Nacho Station <br>
            </div>
            <div>
                <input type="radio" name="Salad Name" value="Ceasar"> Ceasar <br>
                <input type="radio" name="Salad Name" value="Pasta">  Pasta <br>
                <input type="radio" name="Salad Name" value="Seasonal Fruit Salad"> Seasonal Fruit Salad <br>
            </div>
            <div>
                <input type="radio" name="Delivery Time" value="Pre Game"> Pre Game <br>
                <input type="radio" name="Delivery Time" value="Kick Off"> Kick Off <br>
                <input type="radio" name="Delivery Time" value="Half Time"> Half Time <br>
            </div>
        </div>

<!--second package-->
        <div>
            <h3>Second Package </h3>
            <div>
                <input type="radio" name="Entree Item" value="Tri-Tip Sandwiches"> Tri-Tip Sandwiches <br>
                <input type="radio" name="Entree Item" value="Nacho Station"> Chili Bar <br>
            </div>
            <div>
                <input type="radio" name="Salad Name" value="Ceasar"> Ceasar <br>
                <input type="radio" name="Salad Name" value="Pasta">  Pasta <br>
                <input type="radio" name="Salad Name" value="Seasonal Fruit Salad"> Seasonal Fruit Salad <br>
            </div>
            <div>
                <input type="radio" name="Delivery Time" value="Pre Game"> Pre Game <br>
                <input type="radio" name="Delivery Time" value="Kick Off"> Kick Off <br>
                <input type="radio" name="Delivery Time" value="Half Time"> Half Time <br>
            </div>
        </div>
<!--        Third package-->
<!-- ... -->
<!--   Eleventh Package-->
    </form>

这是我的 jQuery 代码。我只能输出一组主菜的值(value)。我刚开始使用 jQuery/JS，所以我不确定如何输出每个食品包的每个 radio 组的值。

$('input[name=Entree Item]:checked', '#orderForm').val()
$('#orderForm input').on('change', function() {
    $('#val').text($('input[name=Entree Item]:checked', '#orderForm').val());
});

所以这就是我希望用户看到的:
包裹名称:xxxxxxx
主菜选择:xxxxxxx
沙拉选择:xxxxxxx
交货时间:xxxxxxx
如果用户购买了多个包裹，我也想输出这些包裹的值(value)。
谢谢!!

Answer 1

只要结构保持不变，要汇总所选商品/订单及其值(value)，在单独的 summarizePackages 函数中迭代每个包，缩小每个包的范围选择entree、salad和delivery，然后根据它们的值，在#val元素中显示它们的摘要在表格下。

还要确保为不同包中的单选按钮组设置不同的name 属性，以避免混淆和跨包组选择(例如:第一个 包，在您的name 属性后加上1，例如:Entree Item 1，Salad Name 1，以及 Delivery Time 1 等以下包裹)。

function summarizePackages() {  
  var packages = $('#orderForm > div');
  var summary = '';
  
  packages.each(function(index, pkg) {
    pkg = $(pkg);
    
    var name = $.trim(pkg.find('h3').text());
    var entree = pkg.find('[name^="Entree Item"]:checked');
    var salad = pkg.find('[name^="Salad Name"]:checked');    
    var delivery = pkg.find('[name^="Delivery Time"]:checked');
    var hasOrder = pkg.find('input:checked').length > 0;
    
    if (hasOrder) {
      summary += 'Name of package: <b>' + name + '</b>';
      summary += '<br>';
    
      if (entree.length) {
        summary += 'Entree selected: <b>' + entree.val() + '</b>';
      } else {
        summary += 'No Entree selected';
      }    
      summary += '<br>';

      if (salad.length) {
        summary += 'Salad selected: <b>' + salad.val() + '</b>';
      } else {
        summary += 'No Salad selected';
      }    
      summary += '<br>';

      if (delivery.length) {
        summary += 'Delivery selected: <b>' + delivery.val() + '</b>';   
      } else {
        summary += 'No Delivery selected';
      }    
      summary += '<br>';

      summary += '--------------------';
      summary += '<br>';
    }
  });
  
  return summary;
}

$('#orderForm input').on('change', function() {
    var summary = summarizePackages();    
    $('#val').html(summary);
});

#val {
  margin: 15px;
  line-height: 1.5;
  font-size: 16px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<form id="orderForm">
  <!--     first package-->
  <div>
    <h3> First Package</h3>
    <div>
      <input type="radio" name="Entree Item 1" value="Mustang Hot Dog"> Mustang Hot Dog <br>
      <input type="radio" name="Entree Item 1" value="Nacho Station"> Nacho Station <br>
    </div>
    <div>
      <input type="radio" name="Salad Name 1" value="Ceasar"> Ceasar <br>
      <input type="radio" name="Salad Name 1" value="Pasta"> Pasta <br>
      <input type="radio" name="Salad Name 1" value="Seasonal Fruit Salad"> Seasonal Fruit Salad <br>
    </div>
    <div>
      <input type="radio" name="Delivery Time 1" value="Pre Game"> Pre Game <br>
      <input type="radio" name="Delivery Time 1" value="Kick Off"> Kick Off <br>
      <input type="radio" name="Delivery Time 1" value="Half Time"> Half Time <br>
    </div>
  </div>

  <!--second package-->
  <div>
    <h3>Second Package </h3>
    <div>
      <input type="radio" name="Entree Item 2" value="Tri-Tip Sandwiches"> Tri-Tip Sandwiches <br>
      <input type="radio" name="Entree Item 2" value="Nacho Station"> Chili Bar <br>
    </div>
    <div>
      <input type="radio" name="Salad Name 2" value="Ceasar"> Ceasar <br>
      <input type="radio" name="Salad Name 2" value="Pasta"> Pasta <br>
      <input type="radio" name="Salad Name 2" value="Seasonal Fruit Salad"> Seasonal Fruit Salad <br>      
    </div>
    <div>
      <input type="radio" name="Delivery Time 2" value="Pre Game"> Pre Game <br>
      <input type="radio" name="Delivery Time 2" value="Kick Off"> Kick Off <br>
      <input type="radio" name="Delivery Time 2" value="Half Time"> Half Time <br>
    </div>
  </div>
  <!--        Third package-->
  <!-- ... -->
  <!--   Eleventh Package-->
</form>
<div id="val"></div>

根据您的实际需要修改汇总器函数(summarizePackages)。