Question

Here is my page。当用户从购买下拉菜单中选择一个选项时，将出现一些单选按钮或用餐选项下拉菜单。我遇到了一个问题，如果用户检查单选按钮，但决定更改他的购买选项（通过购买下拉菜单并更改它），然后从用餐选项下拉列表中选择并将产品添加到购物车，单选按钮选项仍将被选中并显示在购物车页面上。

我想要完成的是，如果用户在购买选择之间翻转，那么每次都会重置他们的单选按钮/输入选项。

这是我目前的代码：

jQuery(function($) {
    //show meal options depending on user choice
        $('form').on('change', '#purchase', function(){
            // Reset required fields and hide fields
            $('select, input').prop('required', false);
            $('#table-meals, .product-addon-please-choose-your-meal').hide();

      if($(this).val()=="Individual") {
        $('.product-addon-please-choose-your-meal').show();
        $("#table-meals").not(".product-addon-please-choose-your-meal").hide();
        $('input').prop('required',true);
        $('#table-meals select').val("Select an Option...");
      }

      if($(this).val()=="Table of 10") {
        $(".product-addon-please-choose-your-meal").not("#table-meals").hide();
        $('#table-meals').show();
        $('select').prop('required',true);
      }
  });
});

第一个if声明完成了这一点，尽管它并不完美;如果用户选择用餐选项，然后选择不同的购买选项并再次返回，则用餐选项输入字段将为空白而不是读取选择选项。

如果选择了不同的购买选项，我是否知道如何获得用餐选项输入字段（我计划有几个）？

Answer 1

您的信息页面并非没有其他可能产生负面影响的其他挑战，而是通过该网页专门解决您的问题。

链接页面上的收音机输入是：

<div class=" product-addon product-addon-please-choose-your-meal">
    <h3 class="addon-name">Please choose your meal:</h3>
    <p class="form-row form-row-wide addon-wrap-2628-please-choose-your-meal-1-0">
      <label>
        <input type="radio" class="addon addon-radio" name="addon-2628-please-choose-your-meal-1[]" data-raw-price="" data-price="" value="1" /> 1 </label>
    </p>
    <p class="form-row form-row-wide addon-wrap-2628-please-choose-your-meal-1-1">
      <label>
        <input type="radio" class="addon addon-radio" name="addon-2628-please-choose-your-meal-1[]" data-raw-price="" data-price="" value="2" /> 2 </label>
    </p>
    <p class="form-row form-row-wide addon-wrap-2628-please-choose-your-meal-1-2">
      <label>
        <input type="radio" class="addon addon-radio" name="addon-2628-please-choose-your-meal-1[]" data-raw-price="" data-price="" value="3" /> 3 </label>
    </p>
    <div class="clear"></div>
</div>

这些字符需要特别注意才能使用名称周围的引号：特别是方括号。

您可以使用它来按名称指定：

$('input[type=radio][name="addon-2628-please-choose-your-meal-1[]"]').prop('checked', false);

作为替代方案，您可以通过其中的类来指定：

$('input[type=radio].addon.addon-radio').prop('checked', false);

Answer 2

我看到两个选项，第一个和没有额外插件的非常简单的方法是设置单选按钮的道具。

$('input[name="radioButton"]').prop('checked', false);

第二个选项是使用从jQuery中选择的插件创建表单： https://plugins.jquery.com/chosen/

这个插件很容易处理表单中的输入，选择和其他类型。

让我知道它是否适合您最好的祝福扬

如果用户更改下拉选项，jQuery将删除单选按钮/输入选项

2 个答案: