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/

尝试了单击和更改事件，但这就像需要第三个状态

事件发生时，以前的状态不可用

还有其他方法吗？

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

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

具有初始状态的复选框组

2 个答案: