使用 JavaScript 选择随机单选按钮

Question

Objective

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

我做了什么

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

我对编程语言的教育程度为零，只是根据我认为从别人的作品中了解的一点点知识。

使用“Inspect Element”，我看到我的单选按钮都有 class '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();
  
}

页面加载时，未选中任何单选按钮。

不知怎么的，我觉得我快要成功了，但我需要一个知道他们在做什么的人。

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

Answer 1

我认为 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();
   
});

Answer 2

您显示的代码应该可以工作，但它需要 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" />

使用 JavaScript 选择随机单选按钮

Selecting random radio button using JavaScript

html

javascript

survey

radio-button