javascript - 一次选中一个复选框 - 不是单选按钮

Question

首先，在推荐单选按钮之前，我想使用复选框，因为它们可以取消选中。我有 2 个自定义复选框#c1 和#c2；我希望一次打开一个(因此，如果 c1 打开，单击 c2 将取消选中 c1)；我希望两者都能够不受检查。任何想法将不胜感激!

这是我尝试过的:`

let c1 = document.getElementById('c1');
let c2 = document.getElementById('c2');

function oneAtATime() {
  if (c1.checked) {
    c2.checked = false;
  } else if (c2.checked) {
    c1.checked = false;
  }
}
c1.addEventListener('change', oneAtATime);
c2.addEventListener('change', oneAtATime);

<input id="c1" type="checkbox" name="checkbox" class="check">
<label for="c1">
        <h2>example</h2>
    </label>
<input id="c1" type="checkbox" name="checkbox" class="check">
<label for="c1">
        <h2>example</h2>
    </label>

Answer 1

对于 jQuery >= 1.6

$('.check').prop('checked', true);
$('.check').prop('checked', false);

对于 jQuery <1.6:

$('.check').attr('checked', true);
$('.check').attr('checked', false);

片段:

$('.check').click(function(){
  if ($(this).is(':checked')) {
    $('.check').prop('checked', false);
    $(this).prop('checked', true);
  }
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input id="c1" type="checkbox" name="checkbox" class="check">
<label for="c1">
        <h2>example</h2>
    </label>
<input id="c2" type="checkbox" name="checkbox" class="check">
<label for="c2">
        <h2>example</h2>
    </label>