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

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

您的页面并非没有大量其他挑战，这些挑战可能会产生负面影响，但是，克服这些挑战来专门解决您的问题。

您在链接页面上的 radio 输入是这样的:

<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);