说明： -

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单选按钮时，它就会被修复，我无法改为梅赛德斯。

如果我先点击梅赛德斯单选按钮，那么我就可以切换到宝马了，但是一旦我选择宝马，我就不能再换成梅赛德斯而且它已经修好了。

我的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 中为两个单选按钮指定相同的名称。这将负责选择和取消选择。

<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

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

这是通过指定具有相同input的{{1}}元素来完成的。

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

name

无需其他Javascript即可获得所需的行为。

希望这有助于提供一些额外的解释！

修改不确定你要做什么，但你可以通过简单地迭代Javascript中的无线电元素来提取值：

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

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

2 个答案:

说明： -