使用 JavaScript 选择随机单选按钮答案

【问题标题】：Selecting random radio button using JavaScript使用 JavaScript 选择随机单选按钮
【发布时间】：2022-01-26 03:59:56
【问题描述】：

目标

我正在使用 Alchemer（以前的 SurveyGizmo）创建调查。为了正确路由我的参与者，我需要创建一个带有单选按钮（单选）的隐藏问题，并结合随机选择一个单选按钮的 JavaScript 操作。 JavaScript 应该在页面加载时自动执行。

我做了什么

我搜索了 stackoverflow 和互联网，找到了几个做类似事情的 JSFiddles，尝试为我逆向工程解决方案，但它不起作用。

我对编程语言的教育为零，只是根据我从其他人的工作中理解的一点点去做。

使用“检查元素”，我看到我的单选按钮都有类“sg-input sg-input-radio”，所以我尝试使用 getElementsByClassName 收集它们，甚至不确定这是否是解决此问题的方法。

这是我目前得到的结果

$(document).ready(function(){
    var array = document.getElementsByClassName('sg-input sg-input-radio');
    var winnerButton;
    var numberOfButtons = array.length;

  
  function SelectRadio() {
    
    var randomNumber = Math.floor(Math.random() * numberOfButtons);
    
    winnerButton = array[randomNumber];
    
    winnerButton.checked = true;
   
    }
  
SelectRadio();
  
}

当页面加载时，没有选择单选按钮。

不知何故，我觉得我快要让它发挥作用了，但我需要一个知道他们在做什么的人。

干杯，感谢您抽出宝贵的时间！

【问题讨论】：

标签： javascript html radio-button survey

【解决方案1】：

您显示的代码应该可以工作，但它需要 jQuery，我不知道它是否在调查页面上可用。这是一个没有任何依赖的解决方案：

function selectRandomRadioButton(radioButtons) {
  const index = Math.floor(Math.random() * radioButtons.length);
  const element = radioButtons[index];

  element.checked = true;

  return `Selected Option ${element.value}`;
}

document.addEventListener('DOMContentLoaded', () => {
  const radioButtons = document.getElementsByClassName('sg-input sg-input-radio');

  const message = selectRandomRadioButton(radioButtons);
  console.log(message);
});

Option A:
<input type="radio" class="sg-input sg-input-radio" value="A" name="x" /> Option B:
<input type="radio" class="sg-input sg-input-radio" value="B" name="x" />

【讨论】：

谢谢你，这很好用！还有一种情况，我需要在多选题中随机选择多个复选框。复选框的类别是“sg-input sg-input-checkbox”。我将如何调整您的脚本以随机选择，比如说 2 个复选框？
@Juulez 代码会有点不同，您将需要一个选择 N 个随机元素（在您的示例 2 中）并检查它们的函数。由于它超出了此问题的范围，我建议您创建另一个问题并将其链接到此处。

【解决方案2】：

我认为 getElementsByClassName 可能有多个类的问题。所以我使用了 querySelectorAll 并且它有效。

也许这是一个 c+p 错误，但在您的示例代码中是 a );不见了。

$(document).ready(function(){
    var array = document.querySelectorAll('.sg-input.sg-input-radio');
    var winnerButton;
    var numberOfButtons = array.length;

  
  function SelectRadio() {
    var randomNumber = Math.floor(Math.random() * numberOfButtons);
    
    winnerButton = array[randomNumber];
    
    winnerButton.checked = true;
   
    }
  
    SelectRadio();
   
});

【讨论】：