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

我正在处理餐饮订购单，我希望用户看到他们订购的东西。该表单由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代码。我只能输出一组主菜项目的值。我刚刚开始使用jQuery / JS，所以我不确定如何输出每个食品包装的每个无线电组的值。

$('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
而且，如果用户购买多个包装，我也想输出这些包装的价值。
谢谢！！

最佳答案

只要结构保持不变，以汇总选定的项目/订单及其值，请在单独的summarizePackages函数中迭代每个包，缩小每个选定的entree，salad和delivery的范围，然后根据其值，在表格下方的#val元素中显示其摘要。

还请确保不同包装中的单选按钮组具有不同的name属性，以避免混淆和跨包装组选择（例如：对于1st软件包，将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）。