javascript Javascript单选按钮在选择一个单选按钮时取消选择其他按钮？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/27728598/
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
Javascript radio button deselect others when selecting one radio button?
提问by Choudhury Saadmaan Mahmid
I have two radio buttons for selecting cars. There are only two options: either you can select a BMW car or you can select a Mercedes car.
我有两个用于选择汽车的单选按钮。只有两种选择：要么选择宝马汽车，要么选择梅赛德斯汽车。
Here's my html code for this:
这是我的 html 代码：
<label>Please specify car:</label>
<label>BMW</label>
<input type="radio" name="is_BMW" id="is_BMW" onchange="valueChanged()" />
<label>Mercedes</label>
<input type="radio" name="is_Mercedes" id="is_Mercedes" onchange="valueChanged()" />
The javascript function for this event is valueChanged() and it is pretty much straight-forward:
此事件的 javascript 函数是 valueChanged()，它非常简单：
<script>
function valueChanged(){
if(document.getElementById("is_BMW").checked == true)
{
document.getElementById("is_Mercedes").checked = false;
}
else
{
document.getElementById("is_BMW").checked = false;
}
}
</script>
The problem I'm getting is this: whenever I click the BMW radio button, it get's fixed and I can't change to Mercedes.
我遇到的问题是：每当我点击 BMW 单选按钮时，它就会被修复，我无法切换到梅赛德斯。
If I click on the Mercedes radio button first, then I'm able to switch to BMW, but again, once I select BMW, I can't change to Mercedes anymore and it get's fixed.
如果我先点击梅赛德斯单选按钮，然后我就可以切换到宝马，但同样，一旦我选择了宝马，我就不能再切换到梅赛德斯了，它会得到修复。
Is there anything wrong with my Javascript? Because my Javascript knowledge tells me there's nothing wrong with my Javascript code. Is it something else? Should I use jQuery to resolve this?
我的 Javascript 有什么问题吗？因为我的 Javascript 知识告诉我，我的 Javascript 代码没有任何问题。是别的吗？我应该使用 jQuery 来解决这个问题吗？
Edit-1: I'm sorry I forgot to mention one crucial point - I need to pass value onchange of radio button. I'm especially sorry to the one person who answered my question instantly, I should've mentioned this earlier, my bad.
Edit-1：对不起，我忘了提到一个关键点 - 我需要传递单选按钮的值。对于立即回答我问题的人，我特别抱歉，我应该早点提到这一点，我的错。
Hence, my actual Javascript could should be something like this:
因此，我的实际 Javascript 应该是这样的：
<script>
function valueChanged(){
if(document.getElementById("is_BMW").checked == true)
{
document.getElementById("is_Mercedes").checked = false;
document.getElementById("is_BMW").value = 1;
document.getElementById("is_Mercedes").value = 0;
}
else
{
document.getElementById("is_BMW").checked = false;
document.getElementById("is_BMW").value = 0;
document.getElementById("is_Mercedes").value = 1;
}
</script>
回答by Mritunjay
I'm changing my answer according to your requirement.
我正在根据您的要求更改我的答案。
In your HTMLgive same name to both radio buttons. This will take care of select and deselect.
在您的HTML 中，为两个单选按钮指定相同的名称。这将处理select 和 deselect。
<label>Please specify car:</label>
<label>BMW</label>
<input type="radio" name="car" id="is_BMW" />
<label>Mercedes</label>
<input type="radio" name="car" id="is_Mercedes" />
And put the value changing logic in jslike bellow
并将值更改逻辑放在js 中，如下所示
function valueChanged() {
if (document.getElementById("is_BMW").checked == true) {
document.getElementById("is_BMW").value = 1;
document.getElementById("is_Mercedes").value = 0;
} else {
document.getElementById("is_BMW").value = 0;
document.getElementById("is_Mercedes").value = 1;
}
console.log(document.getElementById("is_BMW").value);
console.log(document.getElementById("is_Mercedes").value)
}
Explanation:-
解释：-
The name setting tells which group of radio buttons the field belongs to. When you select one button, all other buttons in the same group are unselected.
name 设置告诉该字段属于哪一组单选按钮。当您选择一个按钮时，同一组中的所有其他按钮都将被取消选择。
回答by James Taylor
The radio button is unlike a check box because only one element can be selected at a time. But, in order for this to work, the radio buttons must be 'grouped' together.
单选按钮与复选框不同，因为一次只能选择一个元素。但是，为了使其工作，单选按钮必须“组合”在一起。
This is done by specifying inputelements with the same name.
这是通过指定input具有相同name.
In your example, this can be achieved by changing the following in your HTML:
在您的示例中，这可以通过更改 HTML 中的以下内容来实现：
<input type="radio" name="car_type" id="BMW" />
<input type="radio" name="car_type" id="Mercedes" />
No additional Javascript would be necessary to get the desired behavior.
不需要额外的 Javascript 来获得所需的行为。
Hope this helps offer some additional explanation!
希望这有助于提供一些额外的解释！
Edit:Not sure what you are trying to do, but you can extract the value by simply iterating over the radio elements in Javascript:
编辑：不确定您要做什么，但您可以通过简单地迭代 Javascript 中的单选元素来提取值：
var r = document.getElementsByName('car_type');
for (var i = 0, i < r.length; i++) {
if (r[i].checked) {
// insert code to use the checked value
alert(r[i].value);
break;
}
}
