当选择单选按钮时，Javascript如何取消选择其他单选按钮？

Question

当选择单选按钮时，Javascript如何取消选择其他单选按钮？

5

我有两个单选按钮用于选择汽车。只有两个选项：您可以选择一辆宝马汽车或者您可以选择一辆梅赛德斯汽车。

这是我的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>

我遇到的问题是：每当我点击宝马单选按钮时，它被固定了，我无法切换到奔驰。

如果我先点击梅赛德斯收音机按钮，然后我就能切换到宝马，但是，一旦我选择了宝马，我就不能再改变到梅赛德斯并且它被固定了。

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

编辑-1：我很抱歉忘记了一个关键点 - 我需要在单选按钮的onchange事件中传递值。对于那个即时回答我的人，我特别抱歉，我应该更早地提到这一点，我的错。

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

- Choudhury Saadmaan Mahmid

无需包含JavaScript函数。您可以使用Mritunjay代码。 - Praveen Dabral

这些标签需要for属性（或者需要包裹它们的输入）。它们还应该在输入框的右侧，而不是左侧。http://www.w3.org/TR/WCAG20-TECHS/H44.html - danielnixon

@danielnixon 感谢您指出这些问题。 - Choudhury Saadmaan Mahmid

2个回答

7

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

这可以通过指定具有相同名称的元素来完成。

在您的示例中，可以通过更改以下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;
    }
}

- James Taylor

不，我不需要提取值。它就像一个开关：如果选择了宝马，则 is_bmw = 1，is_mercedes = 0。反之亦然，如果选择了奔驰，则 is_bmw = 0，is_mercedes = 1。is_bmw 和 is_mercedes 是我数据库表中的两列。在我的 PHP 代码中，使用 $_POST 我可以获取这两个 1 和 0 的值，然后运行一个 INSERT 查询将这些值传递到数据库。明白吗？ - Choudhury Saadmaan Mahmid

1

好的，我明白了。那么我认为你在原帖中的JavaScript代码完全正常。我只会从代码块中删除document.getElementById("is_XXXX").checked = false;这些行，因为这已经由单选按钮组处理了。然后，它应该没问题了。 - James Taylor

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Mritunjay · Accepted Answer

根据您的要求，我更改了我的答案。

在您的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)
}

说明：

name属性指定单选按钮属于哪个组。当您选择一个按钮时，同一组中的所有其他按钮都会取消选择。

更新演示