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

Question

这是我的页面。 当用户从购买下拉菜单中选择一个选项时，将出现一些单选按钮或膳食选项下拉菜单。 我遇到了一个问题，如果用户选中一个单选按钮，但决定更改他的购买选项（通过转到购买下拉菜单并更改它），然后从膳食选项下拉菜单中选择并将产品添加到购物车，单选按钮选项仍将被选中并出现在购物车页面上。

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

这是我当前的代码：

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语句实现了这一点，尽管它并不完美； 如果他们的用户选择了用餐选项，然后选择了不同的购买选项并再次返回，则用餐选项输入字段将为空白而不是阅读Select an Option 。

关于如何在选择不同的购买选项时重置膳食选项输入字段（我计划有几个）的任何想法？

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/

这个插件很简单，可以更好地处理表单中的输入、选择和其他类型。

让我知道它是否适合您 最好的问候 Jan