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

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>