Llamar a cliquear en una lista de botones de radio usando javascript

33

¿Cómo está generando la lista de botones de opción? Si sólo está usando HTML:

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

Si se está generando éstos a través de algo así como ASP.NET, se puede añadir que como un atributo a cada elemento de la lista. Puede ejecutar este Después de llenar su lista, o en línea si usted construye su lista uno por uno:

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

Más información: http://www.w3schools.com/jsref/event_onclick.asp

Fuente

2008-12-12 12:40:41

+0

No quiere decir foreach (ListItem RadioButton en RadioButtons.Items)? – Fandango68

15

Estoy de acuerdo con @annakata que esta cuestión necesita un poco más aclaraciones, pero aquí es un ejemplo muy, muy básico de cómo configurar un controlador onclick evento para los botones de radio:

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

Fuente

2008-12-12 12:46:09 Tom

7

el problema aquí es que la prestación de un RadioButtonList envuelve los botones de radio individuales (ListItems) en etiquetas span y e Cuando asigna un controlador de eventos del lado del cliente al elemento de la lista directamente usando Atributos, asigna el evento al intervalo. Asignar el evento a RadioButtonList lo asigna a la tabla en la que se representa.

El truco aquí es agregar ListItems en la página aspx y no desde el código subyacente. A continuación, puede asignar la función de JavaScript a la propiedad onClick. Esta publicación de blog; attaching client-side event handler to radio button list by Juri Strumpflohner lo explica todo.

Esto solo funciona si conoce los ListItems por adelantado y no ayuda cuando los elementos en RadioButtonList necesitan ser agregados dinámicamente usando el código detrás.

Fuente

2008-12-18 16:36:06

+1

Para empeorar las cosas, el onClick tampoco aparece en Intellisense. Gracias, esto ayudó. – Narayana

21

para activar el evento de clic en un botón de radio invocar el método click() en el elemento DOM:

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

usando jQuery:

$("#radioButton").click()

AngularJS:

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

Fuente

2011-11-23 15:00:02

+1

Sin embargo, hay una cosa con el .click(): Si cambia el valor seleccionado de una radio con javascript como este, el evento 'change' no se dispara en IE (Probé IE8) – Michiel

+0

@Michiel muchas gracias, ¡ese comentario resolvió un problema muy difícil para mí! Publicó una pregunta/respuesta al respecto - http://stackoverflow.com/a/13827249/66372 ps. el comportamiento también está presente en cromo – eglasius

0

intento siguiente solución

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

    });

Fuente

2017-05-19 21:21:13 saim2025

Llamar a cliquear en una lista de botones de radio usando javascript

Respuesta

Cuestiones relacionadas