javascript - 选中一个有问题时取消选中其他单选按钮

通过单击div选择单选按钮时，我的UI出现问题：

我有一个循环，显示了各种单选按钮：

{% for product in collections.regalos.products %}
<li class="grid__item large--one-third gift-card">
  <div class="gift-select-option-inside">
    <input required type="radio" class="gift-input"
    name="properties[Regalo]" value="{{ product.title }}"> <label>{{
    product.title }}</label>
  </div>
</li>
{% endfor %}

我想在切换单选按钮时应用一个类，但是它将在每个单选输入上重复（其他输入在单击一个新输入时不会禁用其类）

<script>
  $(".gift-card").on("click", function() {
      var giftradio = $(this).find('input[type=radio]').prop('checked', true);
      giftradio.parent('div').toggleClass('selectedgift');
      $('#builder-t-1').append("<span class='ok'>OK</span>");
  });

   if($('.gift-input').is(':checked')) { alert("it's checked"); }
</script>

基本上，我不想要这样：
每次单击广播时，一切都会重复。我只需要选择1 div和选项卡上的一个警报。

最佳答案

一种方法是取消选中所有单选按钮，然后选择正确的单选按钮。

<script>
  $(".gift-card").on("click", function() {
    // deselect all
    $('.gift-input').prop('checked', false).parent('div').removeClass('selectedgift');

    var giftradio = $(this).find('input[type=radio]').prop('checked', true);
    giftradio.parent('div').toggleClass('selectedgift');

    $('#builder-t-1').html("<span class='ok'>OK</span>");
  });

  if($('.gift-input').is(':checked')) { alert("it's checked"); }
</script>

关于javascript - 选中一个有问题时取消选中其他单选按钮，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/49142151/