type - saber si radio esta checked javascript

El controlador de eventos OnChange para el botón de opción(INPUT type="radio") no funciona como un valor

Question

Estoy buscando una solución generalizada para esto.

Considere 2 entradas de tipo de radio con el mismo nombre. Cuando se envía, el que está marcado determina el valor que se envía con el formulario:

<input type="radio" name="myRadios" onchange="handleChange1();" value="1" />
<input type="radio" name="myRadios" onchange="handleChange2();" value="2" />

El evento de cambio no se activa cuando se desactiva un botón de opción. Entonces, si la radio con value = "1" ya está seleccionada y el usuario selecciona la segunda, handleChange1 () no se ejecuta. Esto presenta un problema (para mí de todos modos) en el sentido de que no hay ningún evento donde pueda detectar esta des-selección.

Lo que me gustaría es una solución alternativa para el evento onchange para el valor del grupo de casillas de verificación o, alternativamente, un evento de verificación que detecta no solo cuando se marca una radio sino también cuando no está marcada.

Estoy seguro de que algunos de ustedes se han encontrado con este problema antes. ¿Cuáles son algunas soluciones (o idealmente, cuál es la forma correcta de manejar esto)? Solo quiero ver el evento de cambio, acceder a la radio previamente verificada así como a la radio recién revisada.

PD
onclick parece un mejor evento (navegador cruzado) para indicar cuándo se marca una radio, pero todavía no resuelve el problema sin marcar.

Supongo que tiene sentido por qué Onchange para un tipo de casilla de verificación funciona en un caso como este, ya que cambia el valor que envía cuando lo marca o lo desmarca. Me gustaría que los botones de radio se comportaran más como el cambio de un elemento SELECT, pero ¿qué se puede hacer ...?

Answer 1

¿Qué hay de usar el evento de cambio de Jquery?

$(function() {
    $(''input:radio[name="myRadios"]'').change(function() {
        if ($(this).val() == ''1'') {
            alert("You selected the first option and deselected the second one");
        } else {
            alert("You selected the second option and deselected the first one");
        }
    });
});

jsfiddle: http://jsfiddle.net/f8233x20/

Answer 2

Almacene la radio verificada anterior en una variable:
http://jsfiddle.net/dsbonev/C5S4B/

HTML

<input type="radio" name="myRadios" value="1" /> 1
<input type="radio" name="myRadios" value="2" /> 2
<input type="radio" name="myRadios" value="3" /> 3
<input type="radio" name="myRadios" value="4" /> 4
<input type="radio" name="myRadios" value="5" /> 5

JS

var changeHandler = (function initChangeHandler() {
    var previousCheckedRadio = null;

    var result = function (event) {
        var currentCheckedRadio = event.target;
        var name = currentCheckedRadio.name;

        if (name !== ''myRadios'') return;

        //using radio elements previousCheckedRadio and currentCheckedRadio

        //storing radio element for using in future ''change'' event handler
        previousCheckedRadio = currentCheckedRadio;
    };

    return result;
})();

document.addEventListener(''change'', changeHandler, false);

CÓDIGO DE EJEMPLO JS

var changeHandler = (function initChangeHandler() {
    var previousCheckedRadio = null;

    function logInfo(info) {
        if (!console || !console.log) return;

        console.log(info);
    }

    function logPrevious(element) {
        if (!element) return;

        var message = element.value + '' was unchecked'';

        logInfo(message);
    }

    function logCurrent(element) {
        if (!element) return;

        var message = element.value + '' is checked'';

        logInfo(message);
    }

    var result = function (event) {
        var currentCheckedRadio = event.target;
        var name = currentCheckedRadio.name;

        if (name !== ''myRadios'') return;

        logPrevious(previousCheckedRadio);
        logCurrent(currentCheckedRadio);

        previousCheckedRadio = currentCheckedRadio;
    };

    return result;
})();

document.addEventListener(''change'', changeHandler, false);

Answer 3

Como puede ver aquí: http://www.w3schools.com/jsref/event_onchange.asp El atributo onchange no es compatible con los botones de opción.

La primera pregunta de SO vinculada por usted le da la respuesta: use el evento onclick lugar y verifique el estado del botón de radio dentro de la función que desencadena.

Answer 4

Como puede ver en este ejemplo: http://jsfiddle.net/UTwGS/

HTML:

<label><input type="radio" value="1" name="my-radio">Radio One</label>
<label><input type="radio" value="2" name="my-radio">Radio One</label>

jQuery:

$(''input[type="radio"]'').on(''click change'', function(e) {
    console.log(e.type);
});

tanto el click como los eventos de change se activan al seleccionar una opción de botón de opción (al menos en algunos navegadores).

También debo señalar que en mi ejemplo, el evento de click todavía se activa cuando usa la pestaña y el teclado para seleccionar una opción.

Entonces, mi punto es que aunque el evento de change se click algunos navegadores, el evento de click debería proporcionar la cobertura que necesita.

Answer 5

Esta es la función más fácil y eficiente de usar simplemente agregue tantos botones como desee a checked = false y haga que el evento onclick de cada botón de radio active esta función. Designe un número único para cada botón de radio

function AdjustRadios(which) 
{
    if(which==1)
         document.getElementById("rdpPrivate").checked=false;
    else if(which==2)
         document.getElementById("rdbPublic").checked=false;

}

Answer 6

Esto está fuera de mi cabeza, pero podrías hacer un evento onClick para cada botón de radio, darles todas las identificaciones diferentes, y luego hacer un ciclo for en el evento para revisar cada botón de radio en el grupo y encontrar cuál es fue verificado mirando el atributo ''marcado''. La identificación del comprobado se almacenará como una variable, pero es posible que desee utilizar una variable temp primero para asegurarse de que el valor de esa variable cambió, ya que el evento click se activaría independientemente de si se seleccionó un nuevo botón de opción o no.

Answer 7

Haría dos cambios:

<input type="radio" name="myRadios" onclick="handleClick(this);" value="1" />
<input type="radio" name="myRadios" onclick="handleClick(this);" value="2" />

1. Utilice el controlador onclick lugar de onchange : está cambiando el "estado comprobado" de la entrada de la radio, no el value , por lo que no hay un evento de cambio.
2. Use una sola función y pase this como un parámetro, que le facilitará verificar qué valor está seleccionado actualmente.

ETA: junto con su función handleClick() , puede rastrear el valor original / anterior de la radio en una variable de ámbito de página. Es decir:

var currentValue = 0;
function handleClick(myRadio) {
    alert(''Old value: '' + currentValue);
    alert(''New value: '' + myRadio.value);
    currentValue = myRadio.value;
}

Answer 8

Me doy cuenta de que este es un problema antiguo, pero este fragmento de código funciona para mí. Quizás alguien en el futuro lo encuentre útil:

<h2>Testing radio functionality</h2>
<script type="text/javascript">var radioArray=[null];</script>
<input name="juju" value="button1" type="radio" onclick="radioChange(''juju'',''button1'',radioArray);" />Button 1
<input name="juju" value="button2" type="radio" onclick="radioChange(''juju'',''button2'',radioArray);" />Button 2
<input name="juju" value="button3" type="radio" onclick="radioChange(''juju'',''button3'',radioArray);" />Button 3
<br />

<script type="text/javascript">
function radioChange(radioSet,radioButton,radioArray)
  {
  //if(radioArray instanceof Array) {alert(''Array Passed'');}
  var oldButton=radioArray[0];
  if(radioArray[0] == null)
    {
    alert(''Old button was not defined'');
    radioArray[0]=radioButton;
    }
  else
    {
    alert(''Old button was set to '' + oldButton);
    radioArray[0]=radioButton;
    }
  alert(''New button is set to '' + radioArray[0]);
  }
</script>

Answer 9

No creo que exista otra forma de almacenar el estado anterior. Aquí está la solución con jQuery

<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script> 
<script type="text/javascript">
    var lastSelected;
    $(function () {
        //if you have any radio selected by default
        lastSelected = $(''[name="myRadios"]:checked'').val();
    });
    $(document).on(''click'', ''[name="myRadios"]'', function () {
        if (lastSelected != $(this).val() && typeof lastSelected != "undefined") {
            alert("radio box with value " + $(''[name="myRadios"][value="'' + lastSelected + ''"]'').val() + " was deselected");
        }
        lastSelected = $(this).val();
    });
</script>

<input type="radio" name="myRadios" value="1" />
<input type="radio" name="myRadios" value="2" />
<input type="radio" name="myRadios" value="3" />
<input type="radio" name="myRadios" value="4" />
<input type="radio" name="myRadios" value="5" />

Después de pensarlo un poco más, decidí deshacerme de la variable y agregar / eliminar la clase. Esto es lo que obtuve: http://jsfiddle.net/BeQh3/2/

Answer 10

Sí, no hay evento de cambio para el botón de opción actualmente seleccionado. Pero el problema es cuando cada botón de radio se toma como un elemento separado. En cambio, un grupo de radio debe considerarse un elemento único como select . Entonces el evento de cambio se activa para ese grupo. Si se trata de un elemento select , nunca nos preocupamos por cada opción, sino que tomamos solo la opción seleccionada. Almacenamos el valor actual en una variable que se convertirá en el valor anterior, cuando se selecciona una nueva opción. De manera similar, debe usar una variable separada para almacenar el valor del botón de opción marcado.

Si desea identificar el botón de mousedown anterior, debe mousedown evento mousedown .

var radios = document.getElementsByName("myRadios");
var val;
for(var i = 0; i < radios.length; i++){
    if(radios[i].checked){
        val = radios[i].value;
    }
}

mira esto: http://jsfiddle.net/diode/tywx6/2/

Answer 11

Si desea evitar la secuencia de comandos en línea, simplemente puede escuchar un evento de clic en la radio. Esto se puede lograr con Javascript simple al escuchar un evento de clic en

for (var radioCounter = 0 ; radioCounter < document.getElementsByName(''myRadios'').length; radioCounter++) {
      document.getElementsByName(''myRadios'')[radioCounter].onclick = function() {
        //VALUE OF THE CLICKED RADIO ELEMENT
        console.log(''this : '',this.value);
      }
}

Answer 12

<form name="myForm">
    <input type="radio" name="myRadios"  value="1" />
    <input type="radio" name="myRadios"  value="2" />
</form>

<script>
    var rad = document.myForm.myRadios;
    var prev = null;
    for(var i = 0; i < rad.length; i++) {
        rad[i].onclick = function() {
            (prev)? console.log(prev.value):null;
            if(this !== prev) {
                prev = this;
            }
            console.log(this.value)
        };
    }
</script>

Answer 13

<input type="radio" name="brd" onclick="javascript:brd();" value="IN">   
<input type="radio" name="brd" onclick="javascript:brd();" value="EX">` 
<script type="text/javascript">
  function brd() {alert($(''[name="brd"]:checked'').val());}
</script>