使用javascript调用onclick on radiobutton list

时间:2008-12-12 12:30:16

标签: javascript onclick radiobuttonlist

如何使用javascript调用onclick on radiobutton list?

7 个答案:

答案 0 :(得分:37)

您是如何生成单选按钮列表的?如果您只是使用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

答案 1 :(得分:21)

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

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

使用jquery:

$("#radioButton").click()

AngularJs:

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

答案 2 :(得分:15)

我同意@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>

答案 3 :(得分:7)

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

这里的技巧是在aspx页面上添加ListItems而不是后面的代码。然后,您可以将JavaScript函数分配给onClick属性。这篇博客文章; attaching client-side event handler to radio button list by Juri Strumpflohner解释了这一切。

这只有在您事先知道ListItems并且无法帮助使用后面的代码动态添加RadioButtonList中的项目时才有效。

答案 4 :(得分:3)

尝试以下解决方案

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

   });

答案 5 :(得分:0)

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 :(得分:0)

其他答案对我不起作用,因此我检查了Telerik's official documentation,它说您需要找到按钮并调用click()函数:

function KeyPressed(sender, eventArgs) {
            var button = $find("<%= RadButton1.ClientID %>");
            button.click();
        }
豫ICP备18024241号-1