使用 javascript 在单选按钮列表上调用 onclick

Question

如何使用 JavaScript 调用单选按钮列表上的 onclick？

Answer 1

您如何生成单选按钮列表？ 如果您只使用 HTML：

<input type="radio" onclick="alert('hello');"/>

如果您通过 ASP.NET 等方式生成这些内容，则可以将其作为属性添加到列表中的每个元素。 您可以在填充列表后运行此命令，或者如果您逐一构建列表，则可以内联它：

foreach(ListItem RadioButton in RadioButtons){
    RadioButton.Attributes.Add("onclick", "alert('hello');");
}

更多信息：http://www.w3schools.com/jsref/event_onclick.asp

Answer 2

要触发单选按钮上的 onClick 事件，请在其 DOM 元素上调用 click() 方法：

document.getElementById("radioButton").click()

使用 jQuery：

$("#radioButton").click()

AngularJs：

angular.element('#radioButton').trigger('click')

Answer 3

我同意 @annakata 的观点，这个问题需要更多的澄清，但这里有一个非常非常基本的示例，说明如何为单选按钮设置 onclick 事件处理程序：

window.onload = function() {
  var ex1 = document.getElementById('example1');
  var ex2 = document.getElementById('example2');
  var ex3 = document.getElementById('example3');

  ex1.onclick = handler;
  ex2.onclick = handler;
  ex3.onclick = handler;
}

function handler() {
  alert('clicked');
}

<input type="radio" name="example1" id="example1" value="Example 1" />
<label for="example1">Example 1</label>
<input type="radio" name="example2" id="example2" value="Example 2" />
<label for="example1">Example 2</label>
<input type="radio" name="example3" id="example3" value="Example 3" />
<label for="example1">Example 3</label>

Answer 4

这里的问题是，RadioButtonList 的呈现将各个单选按钮 (ListItems) 包装在 span 标记中，甚至当您直接使用 Attributes 将客户端事件处理程序分配给列表项时，它也会将事件分配给 span。 将事件分配给 RadioButtonList 会将其分配给它在其中呈现的表。

这里的技巧是在 aspx 页面上添加 ListItems，而不是从后面的代码添加。 然后，您可以将 JavaScript 函数分配给 onClick 属性。 这篇博文； 将客户端事件处理程序附加到单选按钮列表Juri Strumpflohner 解释了这一切。

仅当您提前知道 ListItems 时，这才有效，并且对于需要使用后面的代码动态添加 RadioButtonList 中的项目的位置没有帮助。

Answer 5

我认为以上所有方法都可能有效。 如果您需要的很简单，我使用：

function checkRadio(name) {
  if (name == "one") {
    console.log("Choice: ", name);
    document.getElementById("one-variable-equations").checked = true;
    document.getElementById("multiple-variable-equations").checked = false;

  } else if (name == "multiple") {
    console.log("Choice: ", name);
    document.getElementById("multiple-variable-equations").checked = true;
    document.getElementById("one-variable-equations").checked = false;
  }
}

<div class="radio-buttons-choice" id="container-3-radio-buttons-choice">
  <input type="radio" name="one" id="one-variable-equations" onclick="checkRadio(name)"><label>Only one</label><br>
  <input type="radio" name="multiple" id="multiple-variable-equations" onclick="checkRadio(name)"><label>I have multiple</label>
</div>

Answer 6

尝试以下解决方案

$(document).ready(function() {
  $('.radio').click(function() {
    document.getElementById('price').innerHTML = $(this).val();
  });
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="variant">
  <label><input type="radio" name="toggle" class="radio" value="19,99€"><span>A</span></label>
  <label><input type="radio" name="toggle" class="radio" value="<<<"><span>B</span></label>
  <label><input type="radio" name="toggle" class="radio" value="xxx"><span>C</span></label>
  <p id="price"></p>
</div>

Answer 7

其他答案对我不起作用，所以我检查了 Telerik的官方文档说你需要找到按钮并调用click()函数：

function KeyPressed(sender, eventArgs) {
  var button = $find("<%= RadButton1.ClientID %>");
  button.click();
}