Блог

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

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

#javascript #jquery #checkbox

#javascript #jquery #флажок

Вопрос:

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

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

пробовал с событием щелчка и изменения, но похоже, что требуется третье состояние

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

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

Комментарии:

1. Звучит так, как будто вам нужен переключатель…

2. нет, нужно иметь возможность снять оба флажка

3. Это просто означает, что вы хотите радио с некоторой магией , : D

Ответ №1:

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

 $(".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>

Ответ №2:

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

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