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

Question

通过单击 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 %}

我想在通过切换检查 radio 时应用一个类，但它会在每个 radio 输入上重复(其他输入不会在单击新输入时禁用它们的类)

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

基本上，我不想要这个:每次我点击 radio 时，一切都会被复制。我只需要选择 1 个 div 和选项卡上的一个警报。

Answer 1

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

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