Call onclick in a list of radio objects using javascript

Question

Call onclick in a list of radio objects using javascript

How can I call onclick in the list of radio books using javascript?

+46

javascript onclick radiobuttonlist

sajay Dec 12 '08 at 12:30

source share

7 answers

Michael Haren · Answer 1 · 2008-12-12 12:40

How do you create a list of radio buttons? If you just use HTML:

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

If you create them through something like ASP.NET, you can add this as an attribute for each item in the list. You can run this after filling in your list or embed it if you create the list one by one:

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

Additional information: http://www.w3schools.com/jsref/event_onclick.asp

Vitalii Fedorenko · Answer 2 · 2011-11-23 15:00

To fire the onClick event on a radio book, call the click() method on the DOM element:

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

using jquery:

 $("#radioButton").click()

AngularJs:

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

Tom · Answer 3 · 2008-12-12 12:46

I agree with @annakata that this question needs a more detailed explanation, but here is a very, very simple example of how to configure the onclick event handler for radio buttons:

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

Dave Anderson · Answer 4 · 2008-12-18 16:36

The problem is that the RadioButtonList rendering wraps the individual ListItems in the span tags and even when you assign a client-side event handler to the list item directly using the attributes, it assigns a span to the event. Assigning a RadioButtonList event assigns it to the table in which it is mapped.

The trick here is to add ListItems to an aspx page, not from code. You can then assign the JavaScript function to the onClick property. This is a blog post; adding a client-side event handler to the radio room list of Juri Strumpflohner explains all this.

This only works if you know ListItems in advance and do not help when elements in the RadioButtonList should be dynamically added using code.

saim2025 · Answer 5 · 2017-05-19 21:21

try the following solution

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

Daniela · Answer 6 · 2019-03-23 16:23

 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>

Roshna Omer · Answer 7 · 2019-09-09 07:49

Other answers didn’t work for me, so I checked the official Telerik documentation , which says that you need to find the button and call the click() function:

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

Call onclick in a list of radio objects using javascript

More articles: