Javascript 只选择一个复选框
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/8518372/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
only select one checkbox
提问by Rene
I would like to build a javascript so a user can choose only one option between the the mentioned below. Could you give me some pointers how to do this since I am a javascript noob.
我想构建一个 javascript，以便用户只能在下面提到的选项之间选择一个选项。你能给我一些如何做到这一点的指示，因为我是一个 javascript 菜鸟。
Thank you!
谢谢！
This is the picture of the part of a menu
这是菜单部分的图片
<td><label for="dock_books_search_visible_online"> Visible online?</label></td>
<td><input type="checkbox" name="option" value="checkedVisibleOk" id="dock_books_visible_ok" /> </td>
<td><label for="dock_books_search_visible_online_yes"> Yes</label></td>
<td><input type="checkbox" name="option" value="checkedVisibleNok" id="dock_books_visible_nok" /> </td>
<td><label for="dock_books_search_visible_online_no"> No</label></td>
回答by AlphaMale
For single selection from multiple options we use Radio Buttonsnot CheckBoxes.
对于从多个选项中进行单项选择，我们使用Radio Buttonsnot CheckBoxes。
You should use some thing like this.
你应该使用这样的东西。
<input type="radio" name="option" value="Yes" id="yes" />
<input type="radio" name="option" value="No" id="no" />
But stillif you want to go the other way round, Just add the following script in your head tag:
但是如果你想反过来，只需在你的 head 标签中添加以下脚本：
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<script>
$(document).ready(function(){
$(':checkbox').bind('change', function() {
var thisClass = $(this).attr('class');
if ($(this).attr('checked')) {
$(':checkbox.' + thisClass + ":not(#" + this.id + ")").removeAttr('checked');
}
else {
$(this).attr('checked', 'checked');
}
});
});
</script>
Here is the fiddlefor above.
这是上面的小提琴。
Hope this helps.
希望这可以帮助。
回答by graphicdivine
This looks like a job for radio buttons, not checkboxes.
这看起来像是单选按钮的工作，而不是复选框。
回答by shareef
you got a point to use radio buttons any way here is the javascript solution i used it in my project when there is search criteria and search result in data grid by ajax having 13 records when i check one record it disables the rest
你有一点以任何方式使用单选按钮这里是我在我的项目中使用它的javascript解决方案，当我检查一个记录时，ajax在数据网格中有13条记录，它禁用了其余部分
code for javascript enable disable check boxes jsfiddle
<form name="mainForm" method="GET">
Visible online?
<input type="checkbox" name="option" value="checkedVisibleOk" id="option" onclick="changeCheckBox();"/>
yes
<input type="checkbox" name="option" value="checkedVisibleNok" id="option" onclick="changeCheckBox();"/>
no
</form>
<script>
var serNoChecked="";
function changeCheckBox() {
try {
var max = document.mainForm.option.length;
var count = 0;
for (var i = 0; i < max; i++) {
if (document.mainForm.option[i].checked == true) {
count++;
serNoChecked = i;
}
}
if (count == 1) {
for (var i = 0; i < max; i++) {
if (document.mainForm.option[i].checked == false) {
document.mainForm.option[i].disabled = true;
}
}
}
else if (count == 0) {
for (var i = 0; i < max; i++) {
document.mainForm.option[i].disabled = false;
}
}
if (null == max) return false;
if (count == 0) {
return true;
}
else if (count > 0) {
return false;
}
}
catch (e) {
alert(e.message);
}
}
</script>
回答by Anil
Try using Radio Button's, Give them the same name to group them and only allow 1 to be selected:
尝试使用单选按钮，给它们相同的名称以将它们分组并且只允许选择 1 个：
<td>
<label for="dock_books_search_visible_online"> Visible online?</label>
</td>
<td>
<input type="radio" name="option" value="checkedVisibleOk" id="dock_books_visible_ok" />
</td>
<td>
<label for="dock_books_search_visible_online_yes"> Yes</label>
</td>
<td><input type="radio" name="option" value="checkedVisibleNok" id="dock_books_visible_nok" />
</td>
<td>
<label for="dock_books_search_visible_online_no"> No</label>
</td>
回答by Parikshit Sharma
function toggle(chkBox, field) {
for ( var i = 0; i < field.length; i++) {
field[i].checked = false;
}
chkBox.checked = true;
}
<td>
<INPUT type="checkbox" name="xyz" onClick="toggle(this,document.myform.xyz);" value="${incident.incidentID}">
</td>
回答by 50dollanote
Use radio buttons and ensure that the name tag is consistent with all options and it'll automatically select just one w/o the need for additional code or JS.
使用单选按钮并确保名称标签与所有选项一致，它会自动选择一个，而无需额外的代码或 JS。
回答by Awais Qarni
Hi why are you using checkbox? Checkboxes are not for the functionality that you want. Radio buttons are exact what you want to use.
嗨，你为什么使用复选框？复选框不适用于您想要的功能。单选按钮正是您想要使用的。
<form>
<input type="radio" name="sex" value="male" /> Male<br />
<input type="radio" name="sex" value="female" /> Female
</form>
For further details look here
欲了解更多详情，请看这里
