Группа флажка с начальным состоянием

Question

У меня есть два флажка.

<label><input type="checkbox" name="cb1" class="chbR" /> % Retain</label>
<label><input type="checkbox" name="cb2" class="chbP" /> % Passing</label>

Одновременно может быть выбран только один из обоих

Если выбран cb1 и пользователь нажимает cb1, необходимо отменить выбор cb1 Если выбран cb2 и пользователь нажимает cb2, необходимо отменить выбор cb2

Если выбран cb1 и пользователь нажимает cb2, cb1 должен быть отменен Если выбран cb2 и пользователь нажимает cb1, cb2 должен быть отменен http://jsfiddle.net/5o47bgzc/

пробовал с событием click and change, но нужно третье состояние

когда событие происходит, предыдущее состояние недоступно

Есть ли другой способ сделать это?

Answer 1

Таким образом, эта логика использует переключатели и отслеживает выбранное значение. Если вы нажмете на радио, которое уже выбрано, оно отменит его.

$(function(){
  var lastValue = '';
  
  $('.chb')
    .on('click', function(e){
      if (lastValue === e.target.value) {
        e.target.checked = false;
        lastValue = '';
      }
    })
    .on('change', function(e){
      lastValue = e.target.value;
    });
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<label><input type="radio" name="cb" value="retain" class="chb chbR" /> % Retain</label>
<label><input type="radio" name="cb" value="passing" class="chb chbP" /> % Passing</label>

Answer 2

Вы можете сделать это, сделав изменение каждого флажка выключить проверенное состояние другого:

$(".chbR").change(function() {
  $(".chbP").prop('checked', false);
});

$(".chbP").change(function() {
  $(".chbR").prop('checked', false);
});

label {
  display: block;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<label><input type="checkbox" name="cb1" class="chbR" /> % Retain</label>
<label><input type="checkbox" name="cb2" class="chbP" /> % Passing</label>