选择一个单选按钮时，Javascript单选按钮取消选择其他按钮？

Question

我有两个用于选择汽车的单选按钮。只有两个选项：您可以选择宝马汽车，也可以选择梅赛德斯汽车。

这是我的 html 代码：

<label>Please specify car:</label>&nbsp; &nbsp;
<label>BMW</label>
<input type="radio" name="is_BMW" id="is_BMW" onchange="valueChanged()" />
&nbsp;&nbsp;
<label>Mercedes</label>
<input type="radio" name="is_Mercedes" id="is_Mercedes" onchange="valueChanged()" />

这个事件的 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>

我遇到的问题是：每当我单击 BMW 单选按钮时，它都会被修复，我无法更改为 Mercedes。

如果我先点击梅赛德斯单选按钮，那么我可以切换到宝马，但同样，一旦我选择了宝马，我就无法再切换到梅赛德斯并且它已经修复了。

我的 Javascript 有什么问题吗？因为我的 Javascript 知识告诉我，我的 Javascript 代码没有任何问题。是别的吗？我应该使用 jQuery 来解决这个问题吗？

Edit-1： 对不起，我忘了提到一个关键点 - 我需要在单选按钮的更改上传递值。我特别对不起那个立即回答我问题的人，我应该早点提到这一点，我的错。

因此，我的实际 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>

Answer 1

我正在根据您的要求更改答案。

在您的 HTML 中为两个单选按钮指定相同的名称。这将处理选择和取消选择。

<label>Please specify car:</label>&nbsp; &nbsp;
<label>BMW</label>
<input type="radio" name="car" id="is_BMW" />
&nbsp;&nbsp;
<label>Mercedes</label>
<input type="radio" name="car" id="is_Mercedes" />

并将值更改逻辑放入 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)
}

说明：-

名称设置告诉该字段属于哪一组单选按钮。当您选择一个按钮时，同一组中的所有其他按钮都将被取消选择。

updated demo

Answer 2

单选按钮与复选框不同，因为一次只能选择一个元素。但是，为了使其工作，单选按钮必须“分组”在一起。

这是通过使用相同的name 指定input 元素来完成的。

在您的示例中，这可以通过更改 HTML 中的以下内容来实现：

<input type="radio" name="car_type" id="BMW" />
<input type="radio" name="car_type" id="Mercedes" />

无需额外的 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;
    }
}