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

Question

我有两个用于 selecting 汽车的单选按钮。只有两个选择：要么 select 宝马车，要么 select 奔驰车。

这是我的 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()" />

此事件的 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。

如果我先点击 Mercedes 单选按钮，然后我可以切换到 BMW，但同样，一旦我 select BMW，我就不能再切换到 Mercedes 并且它已修复。

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

编辑-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 中，为两个单选按钮指定相同的名称。这将处理 select 和 deselect.

<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)
}

解释：-

名称设置告诉字段属于哪一组单选按钮。当您 select 一个按钮时，同一组中的所有其他按钮都未selected。

updated demo

Answer 2

单选按钮不同于复选框，因为一次只能选择一个元素。但是，为了使其工作，单选按钮必须 'grouped' 在一起。

这是通过指定具有相同 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;
    }
}

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

Javascript radio button deselect others when selecting one radio button?

javascript

html

解释：-