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

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> 

Answer 2

只需检查所单击的项目是否已打开或关闭，例如：

 let c1 = document.getElementById('c1'); let c2 = document.getElementById('c2'); function oneAtATime() { if (this.checked){ // Item clicked has been turned on if (this == c1){ c2.checked = false; } else { 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="c2" type="checkbox" name="checkbox" class="check"> <label for="c2"> <h2>example</h2> </label> 

Answer 3

您可以在事件侦听器中使用this来引用单击的元素。 选中当前框时，只需取消选中另一个框。

 let c1 = document.getElementById('c1'); let c2 = document.getElementById('c2'); function oneAtATime() { if (this.checked) { let other = this == c1 ? c2 : c1; other.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="c2" type="checkbox" name="checkbox" class="check"> <label for="c2"> <h2>example</h2> </label> 

Answer 4

 c1.onclick=()=>{ if(c2.checked) c2.checked=false; } c2.onclick=()=>{ if(c1.checked) c1.checked=false; } 

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

首先，您应该在第二部分中将id更改为c2，并确保将for属性也更改为c2，然后查看此简单的普通JS函数，谢谢。

Answer 5

这将按您的要求工作，并且默认情况下启用了2复选框，

它也可以与任何jquery版本一起使用。

如果单击任何一个复选框，则另一个复选框将被取消选中。

希望这对您有帮助:)

在您的html页面上，这是代码：

<input id="c1" type="checkbox" name="checkbox" class="check" onchange="unloadc1()">
<label for="c1">
<h2>example</h2>
</label>
<input id="c2" type="checkbox" name="checkbox" class="check" onchange="unloadc2()">
<label for="c1">
<h2>example</h2>
</label>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<Script>


function unloadc2() { 
document.getElementById("c1").checked = false;
document.getElementById("c2").checked = true;

}

function unloadc1() { 


document.getElementById("c2").checked = false;
document.getElementById("c1")

  <input id="c1" type="checkbox" name="checkbox" class="check" onchange="unloadc1()"> <label for="c1"> <h2>example</h2> </label> <input id="c2" type="checkbox" name="checkbox" class="check" onchange="unloadc2()"> <label for="c1"> <h2>example</h2> </label> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <Script> function unloadc2() { document.getElementById("c1").checked = true; document.getElementById("c2").checked = false; } function unloadc1() { document.getElementById("c2").checked = true; document.getElementById("c1").checked = false; } $(function() { document.getElementById("c1").checked = true; document.getElementById("c2").checked = true; }); </script>