如何一次只選中一個復選框？
[英]How to only have one checkbox checked at a time?
問題描述
我想知道如何一次只檢查一個checkbox ，我希望用一個功能，沒有radio因為這不是我想要的樣式。
我的代碼如下：
function check(c01) { if((this).is(":checked") == true) { c02 = false; } }
<input type="checkbox" name="creditCheck" id="c01" value="Yes" onclick="check(c01);" />Yes <input type="checkbox" name="creditCheck" id="c02" value="No" onclick= "check(c02);" />No'
6 個解決方案
解決方案1
3 2016-08-06 16:28:26
究竟單選按鈕的用途是什么，如果它只是關於樣式使用復選框樣式的單選按鈕，所以你不需要添加額外的js代碼，請查看下面的示例。
希望這可以幫助。
input[type="radio"] { -webkit-appearance: checkbox; /* Chrome, Safari, Opera */ -moz-appearance: checkbox; /* Firefox */ -ms-appearance: checkbox; /* not currently supported */ }
<input type="radio" name="creditCheck" id="c01" value="Yes" checked/>Yes <input type="radio" name="creditCheck" id="c02" value="No" />No
解決方案2
2 2016-08-06 16:18:48
這是另一個如何執行此操作的示例：
$('input[name="creditCheck"]').on('click', function(e) { $('input[name="creditCheck"]').prop('checked', false); $(this).prop('checked', true); });
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <input type="checkbox" name="creditCheck" id="c01" value="Yes" />Yes <input type="checkbox" name="creditCheck" id="c02" value="No" />No
解決方案3
2 已采納 2016-08-06 16:20:26
這是一個沒有JQuery的例子。 在輸入中添加一個類。單擊時，取消選中所有內容，然后檢查單擊的輸入（如果未選中）。
function check(input) { var checkboxes = document.getElementsByClassName("radioCheck"); for(var i = 0; i < checkboxes.length; i++) { //uncheck all if(checkboxes[i].checked == true) { checkboxes[i].checked = false; } } //set checked of clicked object if(input.checked == true) { input.checked = false; } else { input.checked = true; } }
<input type="checkbox" class="radioCheck" name="creditCheck" id="c01" value="Yes" onclick="check(this);" />Yes <input type="checkbox" class="radioCheck" name="creditCheck" id="c02" value="No" onclick= "check(this);" />No'
解決方案4
1 2016-08-06 16:12:27
只是一個工作示例，隨意優化解決方案：
$("#c01").click(function(){ if($("#c01").is(':checked')) $("#c02").prop("checked", false); }); $("#c02").click(function(){ if($("#c02").is(':checked')) $("#c01").prop("checked", false); });
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <input type="checkbox" name="creditCheck" id="c01" value="Yes" />Yes <input type="checkbox" name="creditCheck" id="c02" value="No" />No
解決方案5
1 2016-08-06 16:18:19
對於非常簡單的用例，只有兩個復選框可以切換，我會按如下方式進行：
function check(checkbox) { var uncheck = checkbox.id === 'c01' ? 'c02' : 'c01'; $('#' + uncheck).prop('checked', false); }
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <input type="checkbox" name="creditCheck" id="c01" value="Yes" onclick="check(this);" />Yes <input type="checkbox" name="creditCheck" id="c02" value="No" onclick= "check(this);" />No
解決方案6
1 2016-08-06 16:27:03
如果我理解得很好：
<!DOCTYPE html> <html> <head> <meta charset="utf-8"/> </head> <body> <input type="checkbox" name="creditCheck" value="Yes" />Yes <input type="checkbox" name="creditCheck" value="No" />No <script type="text/javascript"> function getCheckboxes() { return document.querySelectorAll('input[type=checkbox]'); } function uncheckAllCheckboxes() { var checkboxes = getCheckboxes(); for (var i = 0, length = checkboxes.length; i < length; i++) { checkboxes[i].checked = false; } } function manageClick() { uncheckAllCheckboxes(); this.checked = true; } function init() { var checkboxes = getCheckboxes(); for (var i = 0, length = checkboxes.length; i < length; i++) { checkboxes[i].addEventListener('click', manageClick); } } init(); </script> </body> </html>
一次只選中了一個復選框
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.