时间戳

首页 > 解决方案 > 如何使用 jQuery 获取多个单选按钮组的值

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

问题描述

我正在处理餐饮订单，我希望用户看到他们点了什么。该表单由十一个不同的包组成，因此对每个包进行硬编码并不是一个好主意。每个包裹都有一个主菜、一份沙拉和交货时间，并使用单选按钮。这是我的 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
如果用户购买多个包裹，我也想输出这些包裹的价值.
谢谢！！

标签： javascriptjquery

解决方案

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

还要确保不同包中的单选按钮组具有不同name的属性，以避免混淆和跨包组选择（例如：对于包，为您的属性添加1st后缀，例如：，，等等） .name1Entree Item 1Salad Name 1Delivery 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根据您的实际需要修改summarizer函数（ ）。

推荐阅读