使用 javascript 在单选按钮列表上调用 onclick
Posted
技术标签:
【中文标题】使用 javascript 在单选按钮列表上调用 onclick【英文标题】：Calling onclick on a radiobutton list using javascript 【发布时间】：2010-09-26 15:08:59 【问题描述】：如何？
【问题讨论】：
【参考方案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
【讨论】：
你不是说 foreach(ListItem RadioButton in RadioButtons.Items) 吗？【参考方案2】：要在单选按钮上触发 onClick 事件，请在 DOM 元素上调用 click() 方法：
document.getElementById("radioButton").click()
使用 jquery：
$("#radioButton").click()
AngularJs：
angular.element('#radioButton').trigger('click')
【讨论】：
然而 .click() 有一件事：如果您使用这样的 javascript 更改收音机的选定值，则 IE 中不会触发“更改”事件（我尝试过 IE8） @Michiel 非常感谢，该评论为我解决了一个非常棘手的问题！发布了一个关于它的问题/答案 - ***.com/a/13827249/66372 ps。行为也存在于 chrome 中【参考方案3】：我同意@annakata 的观点，这个问题需要进一步澄清，但这里有一个非常非常基本的示例，说明如何为单选按钮设置 onclick 事件处理程序：
<html>
<head>
<script type="text/javascript">
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');
</script>
</head>
<body>
<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>
</body>
</html>
【讨论】：
【参考方案4】：这里的问题是 RadioButtonList 的呈现将单个单选按钮 (ListItems) 包装在 span 标签中，即使您直接使用 Attributes 将客户端事件处理程序分配给列表项，它也会将事件分配给 span。将事件分配给 RadioButtonList 会将其分配给它所呈现的表。
这里的诀窍是在 aspx 页面上添加 ListItems，而不是从后面的代码中添加。然后，您可以将 JavaScript 函数分配给 onClick 属性。这篇博文； attaching client-side event handler to radio button list by Juri Strumpflohner 解释了一切。
这仅在您提前知道 ListItems 时才有效，并且对于需要使用后面的代码动态添加 RadioButtonList 中的项目没有帮助。
【讨论】：
更糟糕的是，onClick 也不会出现在 Intellisense 中。谢谢，这有帮助。【参考方案5】：Hi, I think all of the above might work. In case what you need is simple, I used:
<body>
<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>
<script>
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;
</script>
</body>【讨论】：
【参考方案6】：尝试以下解决方案
HTML：
<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>
JS：
$(document).ready(function ()
$('.radio').click(function ()
document.getElementById('price').innerHTML = $(this).val();
);
);
【讨论】：
【参考方案7】：其他答案对我不起作用，所以我检查了Telerik's official documentation 它说你需要找到按钮并调用click() 函数：
function KeyPressed(sender, eventArgs)
var button = $find("<%= RadButton1.ClientID %>");
button.click();
【讨论】：
以上是关于使用 javascript 在单选按钮列表上调用 onclick的主要内容，如果未能解决你的问题，请参考以下文章