javascript 选择电台

Posted 2023-03-27

【中文标题】javascript 选择电台

【英文标题】：javascript selected radio

【发布时间】：2011-09-25 20:43:32

【问题描述】：

我想检查选择的无线电输入是什么。

这是我的代码。

<input name="u_type" type="radio" value="staff" id="u_type" checked="checked" /> Staff
<input name="u_type" type="radio" value="admin" id="u_type" /> Admin
<input id="add_user" name="add_user" type="button" onclick="addUser();"  value="Add" class="submitButton admin_add" />

function addUser()

//how to check what is the selected radio input

谢谢。

【问题讨论】：

您是否有机会使用 jQuery 或可以在您的代码中使用？

如果你只有两个按钮，这会帮助你：***.com/questions/1423777/…

【参考方案1】：

function addUser() 
    //how to check what is the selected radio input
    alert(getCheckedRadioValue('u_type'));


function getCheckedRadioValue(name) 
    var elements = document.getElementsByName(name);

    for (var i=0, len=elements.length; i<len; ++i)
        if (elements[i].checked) return elements[i].value;

并且元素的 ID 必须不同。

【讨论】：

最好将其命名为 getCheckedRadioValue，因为它不会像它可能建议的那样返回无线电 html id！

@sorx00 AFAICT ++i 会跳过第一次出现，但我更喜欢i++

@metaleap 我不这么认为***.com/questions/3469885/…

【参考方案2】：

获取选中的单选按钮的值，不使用 jQuery：

var radios = document.getElementsByName("u_type");
for(var i = 0; i < radios.length; i++) 
    if(radios[i].checked) selectedValue = radios[i].value;   

（假设selectedValue 是在别处声明的变量）

【参考方案3】：

$('input[name=u_type]:checked').val()

将为您提供所选选项的值，您当然可以将其分配给变量。由于警告，我还应该指出这是 jquery，一个方便的 javascript 库，用于使 DOM 操作更容易，并且具有出色的跨浏览器兼容性。可以找到here。

【讨论】：

OP 没有提到 jQuery。

是的，但是 jquery 是 javascript。

@kinakuta：所以？如果一个问题只用javascript 标记，你应该假设不应该使用其他库。如果你使用一个，你应该在你的答案中清楚地说明这一点并链接到它。

我已经编辑了我的帖子以指出这一点。在我看来，Jquery 不应该被忽略作为答案，因为它没有被标记为要求它，而是关于澄清库的使用的要点。

或者使用标准接口：document.querySelector('input[name=u_type]:checked").checked

【参考方案4】：

除了 kmb385 的建议，您可以将输入包装在一个表单中，并确保所有输入名称都是不同的（您有两个 u_type）名称。

然后您可以以document.formname.inputname.checked 的身份访问输入，这将返回真或假。

【讨论】：

如果您查看value 而不是checked，它会为您提供选中按钮的名称。没有循环，什么都没有，只是直接访问 javascript 想要让您轻松获得的值。我不知道为什么这个答案的评分不高。

【参考方案5】：

我知道这是一个老问题，但给出的答案似乎过于复杂。

如前所述，您不应该有两个具有相同 id 的元素。这违反了 html 规范。只需删除 id 属性，或将它们设为两个不同的值。然后只需使用它来获取检查值：

document.querySelector("input[type='radio'][name='u_type']:checked").value

【参考方案6】：

您不应该有两个具有相同 id 的单选元素。您需要更改其中一个 ID，然后检查两个单选按钮，例如：

if(document.getElementById("u_type").checked == true)

   //do something

我建议使用 jquery 来代替原生 js。

【讨论】：

当几行代码就足够时，没有理由加载所有的jQuery。

同意。我有点瘦，因为当我想到 js 时，我想到了 jquery。视情况而定。

你为什么要比较布尔值和真值？ if(document.getElementById("u_type").checked)

【参考方案7】：

以下是获取单选按钮值的jQuery实现

$("#u_type").click(function() 
var value = $(this).val();
);

如果你想使用javascript，那么：

function get_radio_value()

for (var i=0; i < document.form.u_type.length; i++)

   if (document.form.u_type[i].checked)
   
   var val = document.form.u_type[i].value;