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代码。我只能输出一组主菜项目的值。我刚刚开始使用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
而且，如果用户购买多个包装，我也想输出这些包装的价值。
谢谢！！

Answer 1

只要结构保持不变，要汇总所选项目/订单及其值，请在单独的entree函数中遍历每个包装，缩小每个选中的{{ 1}}，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）。

Answer 2

也许尝试添加一个“提交”按钮并在选定的收音机中循环

  $("#submit").click(function () {
    $(".package").each(function(){

      $(this).find("input[type=radio]:checked").each(function(){

        console.log($(this).attr("name"), $(this).val())

      })

    })
  })

另外，您的包裹共享相同的无线电名称，因此最好更改此设置以允许用户选择其他包裹中的物品

Answer 3

就您所尝试的而言，这就是您将要做的。更改每个包中name元素的input属性也很重要。

检查工作片段。从任何包装中选择一个项目并向下滚动。

如果您有几十个软件包，这将变得很乏味，我强烈建议您考虑 Jayffe 在他的回答中的建议。

$('#orderForm input').on('change', function() {
   if($('input[name="Entree Item"]').is(':checked')) {
   $('#first-package').show();
      $('#entree').text($('input[name="Entree Item"]:checked', '#orderForm').val());
      $('#salad').text($('input[name="Salad Name"]:checked', '#orderForm').val());
      $('#time').text($('input[name="Delivery Time"]:checked', '#orderForm').val());
    }
    
    if($('input[name="Entree Item-second"]').is(':checked')) {
      $('#second-package').show();
      $('#entree-sec').text($('input[name="Entree Item-second"]:checked', '#orderForm').val());
      $('#salad-sec').text($('input[name="Salad Name-second"]:checked', '#orderForm').val());
      $('#time-sec').text($('input[name="Delivery Time-second"]:checked', '#orderForm').val());
    }
});

#second-package, #first-package {
  display: none;
  margin-top: 50px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<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-second" value="Tri-Tip Sandwiches"> Tri-Tip Sandwiches <br>
                <input type="radio" name="Entree Item-second" value="Nacho Station"> Chili Bar <br>
            </div>
            <div>
                <input type="radio" name="Salad Name-second" value="Ceasar"> Ceasar <br>
                <input type="radio" name="Salad Name-second" value="Pasta">  Pasta <br>
                <input type="radio" name="Salad Name-second" value="Seasonal Fruit Salad"> Seasonal Fruit Salad <br>
            </div>
            <div>
                <input type="radio" name="Delivery Time-second" value="Pre Game"> Pre Game <br>
                <input type="radio" name="Delivery Time-second" value="Kick Off"> Kick Off <br>
                <input type="radio" name="Delivery Time-second" value="Half Time"> Half Time <br>
            </div>
        </div>
<!--        Third package-->
<!-- ... -->
<!--   Eleventh Package-->
    </form>
    
    <div id="first-package">
      <div>
        <label>Name of Package:</label>
        <span>First</span>
      </div>
      <div>
        <label>Entree Selected:</label>
        <span id="entree"></span>
      </div>
      <div>
        <label>Salad Selected:</label>
        <span id="salad"></span>
      </div>
      <div>
        <label>Delivery Time:</label>
        <span id="time"></span>
      </div>
    </div>
    
    <div id="second-package">
      <div>
        <label>Name of Package:</label>
        <span>Second</span>
      </div>
      <div>
        <label>Entree Selected:</label>
        <span id="entree-sec"></span>
      </div>
      <div>
        <label>Salad Selected:</label>
        <span id="salad-sec"></span>
      </div>
      <div>
        <label>Delivery Time:</label>
        <span id="time-sec"></span>
      </div>
    </div>

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

3 个答案: