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

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

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

<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 并在选项卡上显示一个警报。

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>

Answer 2

我认为编写一个 Jquery 脚本来取消选中是一种矫枉过正，请尝试以下方法；

{% 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="gift-select-checkbox" value="{{ product.title }}"> <label>{{ 
    product.title }}</label>
  </div>
</li>
{% endfor %}

<script>
  $(".gift-card").on("click", function() {
      var giftRadioVal=$('.gift-card :checked').val();
      //Do anything with this val
  });
</script>