如何一次只选中一个复选框？
[英]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.