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

。当用户从“购买”下拉菜单中选择选项时，会出现一些单选按钮或“用餐选项”下拉菜单。我遇到了一个问题，如果用户选中一个单选按钮，但决定通过转到“购买”下拉列表并更改它来更改其购买选项，然后从“用餐选项”下拉列表中选择并将产品添加到购物车中，单选按钮选项仍将被选中并显示在购物车页面上

我试图做到的是，如果用户在购买选择之间切换，那么他们的单选按钮/输入选择每次都会重置

这是我目前的代码：

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语句实现了这一点，尽管它并不完美；如果用户选择了一个用餐选项，然后选择了另一个购买选项并再次返回，则“用餐选项”输入字段将为空，而不是“选择选项”

---

关于如何获取“用餐选项”输入字段，我计划在选择不同的购买选项时进行一些重置。我看到两个选项，第一个也是一个非常简单的方法，不需要额外的插件，就是设置单选按钮的道具

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

第二个选项是使用从jQuery中选择的插件创建表单：

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

让我知道它是否适合你 顺致敬意，

---

Jan

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

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

<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].addon.addon-radio').prop('checked', false);

---

你的$table-feeds.not.product-addon-please-choose-Your-feed说选择单一元素的table-feeds，但如果它有类的话就不选了……这是你的愿望吗？@markschultheis抱歉，我不理解你的问题。该行正在使用.hide函数隐藏其他选项。每次更改“购买”下拉选项时，我都尝试重置/取消选中/默认选择。id表膳食标识的元素是否具有该类别的产品插件请选择您的膳食？如果没有，就把它藏起来。这是另一种表达你所拥有的东西的方式，这种方式看起来很奇怪，特别是它在条件之前被隐藏了…我想我必须看看你的布局，看看它是否真的有意义。没关系，这是一个无用的问题和代码，因为您的页面上没有一个ID为table fends的元素rendered@MarkSchultheiss桌上餐和产品附件请选择您的餐是两个不同的分区；每一个对应一个购买选择；如果用户选择“个人”，则“餐桌膳食”分区将保持隐藏，而“产品插件请选择您的膳食”将显示；如果选择表10，则反之亦然。实际上，它有时似乎有效，这真的令人沮丧和困惑。我还尝试了$'input[type=radio]'。prop'checked'，false；，有时也能用。太好了！谢谢，这似乎奏效了。另一个问题：是否有更好的方法，甚至是正确的方法，将“表餐选择优先”if语句框返回到默认选项selectanoption。。。？现在，$'table-Founds select'。选择一个选项。。。；工作正常，但如果您在购买选项之间切换，则选择框将显示为空白，而不是默认选项。@vytfla-使用Chrome我查看您的页面，右键单击页面，选择查看页面源CTRL-U相同的内容；获取新的源页面，单击CTRL-F查找表中的类型，我看不到匹配项，所以我不知道您的页面在这里，因为这不在该页面上。。。正如我在前面指出的，我在您的页面上看到了很多复杂性，这些复杂性在我的评论中是无法通过代码检查的。

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