使用javascript一个单选按钮列表上的onclick调用使用javascript一个单选按钮列

2019-05-11 19:55发布

如何调用的onclick使用javascript一个单选按钮就行了?

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事件调用click()方法的DOM元素上:

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

使用jQuery:

$("#radioButton").click()

AngularJS:

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


Answer 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>


Answer 4:

这里的问题是,一个单选按钮列表的渲染包裹个别单选按钮(listItems中)在span标签,甚至当你将一个客户端事件处理程序列表项直接使用属性将其分配的事件跨度。 分配事件在RadioButtonList它分配给它呈现在表格中。

这里的技巧是添加不从后面的代码aspx页面上和listItems中。 然后,您可以将JavaScript函数在单击属性。 本博客文章; 通过树里Strumpflohner客户端事件处理程序附加到单选按钮列表解释这一切。

仅当您知道listItems中的工作提前,不利于其中在RadioButtonList的项目必须是动态使用后面的代码添加。



Answer 5:

尝试以下解决方案

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

   });


Answer 6:

 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> 



文章来源: Calling onclick on a radiobutton list using javascript