一次選中一個復選框-不是單選按鈕

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>