您如何根据选择的单选按钮调用不同的 javascript 函数？ [复制]

Posted 2023-03-05

【中文标题】您如何根据选择的单选按钮调用不同的 javascript 函数？ [复制]

【英文标题】：How do you call different javascript functions dependent on which radio button is selected? [duplicate]

【发布时间】：2021-02-09 04:09:56

【问题描述】：

我正在尝试通过选择单选按钮调用不同的 javascript 函数以在我的 html 中运行。我目前有 3 个按钮，我希望它们在单击按钮后运行。

我当前的 HTML 是：

<button class="button" onclick="runScript();">Run</button>

<input name="radioButton" type="radio" value="1"> Option 1
<input name="radioButton" type="radio" value="2"> Option 2
<input name="radioButton" type="radio" value="3"> Option 3

我希望所有 3 个选项都运行单独的函数，例如 if value="1" 然后运行函数 1 等。这不是很多，但至于我目前拥有的 javascript：

function runScript() 
    var x = document.getElementsByName("radioButton").value;

关于如何让函数像这样运行有什么想法吗？

【问题讨论】：

switch ($(":radio[name=radioButton]:checked").val())

感谢@Barmar 的评论，你能给我更多的背景信息吗？

您还需要了解什么？在开关里面你可以使用case "1": func1(); break; case "2": func2(); ...

我什至不知道 switch，我将把它放在我的代码中的什么地方？

这是基本的 JavaScript 语法。

【参考方案1】：

你可以用这样的一行来获取所选项目的值：

var x = document.querySelector('input[name="radioButton"]:checked').value

代替：

var x = document.getElementsByName("radioButton").value;

话虽如此，在您确定查询选择器找到任何内容之前，我通常不会访问值，否则您会遇到异常。

【讨论】：

你错过了.value

谢谢.. 我可能不会在执行 querySelector 的地方检查值，但是为了示例，这是真的.. 我们真的应该检查 querySelector 是否找到任何东西，然后获取价值。

使用 jQuery 可以让它更短，也可以避免尝试获取 null 属性的错误。

我通过 javascript 标签找到了解决问题的方法，直到您指出这一点，我才意识到这是一个 jquery 问题。哎呀。我更喜欢直接的 js，但从上下文来看，你是对的。我的错。