¿Cómo usar la radio en caso de cambio?


486

Tengo dos botones de opción para cambiar el evento, quiero cambiar el botón ¿Cómo es posible? Mi código

<input type="radio" name="bedStatus" id="allot" checked="checked" value="allot">Allot
<input type="radio" name="bedStatus" id="transfer" value="transfer">Transfer

Guión

<script>
    $(document).ready(function () {
        $('input:radio[name=bedStatus]:checked').change(function () {
            if ($("input[name='bedStatus']:checked").val() == 'allot') {
                alert("Allot Thai Gayo Bhai");
            }
            if ($("input[name='bedStatus']:checked").val() == 'transfer') {
                alert("Transfer Thai Gayo");
            }
        });
    });
</script>

3
ambos si las condiciones se comparan con 'asignar', cámbielo para transferir ... funciona bien ...
Himanth Kumar

Creo que if($("input[name='bedStatus']:checked").val() == 'allot')se puede escribirif($("input[name='bedStatus']").val() == 'allot')
mplungjan

2
listo kam ma lagyu ho apdane. gracias adjudicar thai gyu bhai.
Harsh Manvar

Respuestas:


930

Puede usar el thisque se refiere al inputelemento actual .

$('input[type=radio][name=bedStatus]').change(function() {
    if (this.value == 'allot') {
        alert("Allot Thai Gayo Bhai");
    }
    else if (this.value == 'transfer') {
        alert("Transfer Thai Gayo");
    }
});

http://jsfiddle.net/4gZAT/

Tenga en cuenta que está comparando el valor con allot con las declaraciones if y:radio selector están en desuso.

En caso de que no esté usando jQuery, puede usar los métodos document.querySelectorAlly HTMLElement.addEventListener:

var radios = document.querySelectorAll('input[type=radio][name="bedStatus"]');

function changeHandler(event) {
   if ( this.value === 'allot' ) {
     console.log('value', 'allot');
   } else if ( this.value === 'transfer' ) {
      console.log('value', 'transfer');
   }  
}

Array.prototype.forEach.call(radios, function(radio) {
   radio.addEventListener('change', changeHandler);
});

Si reinicio la radio de entrada y disparo el evento de cambio de radio, ¿cuál es la salida real?
Ashish Mehta

2
El :radioselector no está en desuso (en jQuery).
Miquel Al. Vicens

2
Solo una nota: no entiendo ese idioma.
indefinido

77
@Piterden En primer lugar, ¡esta respuesta tiene 6 años! Las funciones de flecha se han introducido en ES6 para situaciones en las que no le importa el thisvalor o desea utilizar el thisvalor de contexto circundante en su controlador, utiliza este fragmento this. ¡Y afirmar que usar funciones regulares es "vieja mala práctica" no tiene sentido! Además, los navegadores más antiguos no son compatibles con la sintaxis de la función de flecha Array#includesy uno debe usar un transpilador y una cuña para admitir navegadores más antiguos. ¿Por qué hacer una respuesta simple que no tiene nada que ver específicamente con las funciones de flecha complicadas?
indefinido el

2
En lugar de this, yo uso event.target.
Bobort

137

Una adaptación de la respuesta anterior ...

$('input[type=radio][name=bedStatus]').on('change', function() {
  switch ($(this).val()) {
    case 'allot':
      alert("Allot Thai Gayo Bhai");
      break;
    case 'transfer':
      alert("Transfer Thai Gayo");
      break;
  }
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<input type="radio" name="bedStatus" id="allot" checked="checked" value="allot">Allot
<input type="radio" name="bedStatus" id="transfer" value="transfer">Transfer

http://jsfiddle.net/xwYx9


1
¿Cuál es la diferencia entre usar 'on' y la respuesta anterior?
okenshield

3
@okenshield .on()realmente tiene ganancias en relación con lo anterior, sin embargo, al tener en cuenta los selectores dinámicos, seguramente es la única forma de ir en jQuery 1.7+
Ohgodwhy

55
@Ohgodwhy: ontiene ganancias cuando proporciona un contexto para la delegación de eventos, o incluso para selectores dinámicos como dijo, pero la forma en que lo escribió es exactamente la misma que la respuesta anterior.
Hugo Silva

1
Tenga en cuenta que el interruptor le permite no repetir $ (this) .val (), debería preferir esta versión.
KyleK

36

Una forma más simple y limpia sería usar una clase con la respuesta de @ Ohgodwhy

<input ... class="rButton">
<input ... class="rButton">

Guión

$( ".rButton" ).change(function() {
    switch($(this).val()) {
        case 'allot' :
            alert("Allot Thai Gayo Bhai");
            break;
        case 'transfer' :
            alert("Transfer Thai Gayo");
            break;
    }            
});​

18
$(document).ready(function () {
    $('#allot').click(function () {
        if ($(this).is(':checked')) {
            alert("Allot Thai Gayo Bhai");
        }
    });

    $('#transfer').click(function () {
        if ($(this).is(':checked')) {
            alert("Transfer Thai Gayo");
        }
    });
});

JS Fiddle


19
En lugar de $(this).is(":checked")usar this.checked. Es puro JS y es mucho más rápido.
Gh61

77
@ Gh61, tenía curiosidad y realicé una prueba. Pure JS es mucho más rápido .
Michael Crenshaw

9

Usar la función onchage

<input type="radio" name="bedStatus" id="allot" checked="checked" value="allot" onchange="my_function('allot')">Allot
<input type="radio" name="bedStatus" id="transfer" value="transfer" onchange="my_function('transfer')">Transfer

<script>
 function my_function(val){
    alert(val);
 }
</script>

7

Solución simple ES6 (solo javascript) .

document.forms.demo.bedStatus.forEach(radio => {
  radio.addEventListener('change', () => {
    alert(`${document.forms.demo.bedStatus.value} Thai Gayo`);
  })
});
<form name="demo">
  <input type="radio" name="bedStatus" value="Allot" checked>Allot
  <input type="radio" name="bedStatus" value="Transfer">Transfer
</form>


6
document.addEventListener('DOMContentLoaded', () => {
  const els = document.querySelectorAll('[name="bedStatus"]');

  const capitalize = (str) =>
    `${str.charAt(0).toUpperCase()}${str.slice(1)}`;

  const handler = (e) => alert(
    `${capitalize(e.target.value)} Thai Gayo${e.target.value === 'allot' ? ' Bhai' : ''}`
  );

  els.forEach((el) => {
    el.addEventListener('change', handler);
  });
});

3
<input type="radio" name="radio"  value="upi">upi
<input type="radio" name="radio"  value="bankAcc">Bank

<script type="text/javascript">
$(document).ready(function() {
 $('input[type=radio][name=radio]').change(function() {
   if (this.value == 'upi') {
    //write your logic here

    }
  else if (this.value == 'bankAcc') {
    //write your logic here
 }
 });
 </script>

3

Si los botones de opción se agregan dinámicamente, es posible que desee utilizar esto

$(document).on('change', 'input[type=radio][name=bedStatus]', function (event) {
    switch($(this).val()) {
      case 'allot' :
        alert("Allot Thai Gayo Bhai");
        break;
      case 'transfer' :
        alert("Transfer Thai Gayo");
        break;
    }     
});

0
$(document).ready(function () {
    $('input:radio[name=bedStatus]:checked').change(function () {
        if ($("input:radio[name='bedStatus']:checked").val() == 'allot') {
            alert("Allot Thai Gayo Bhai");
        }
        if ($("input:radio[name='bedStatus']:checked").val() == 'transfer') {
            alert("Transfer Thai Gayo");
        }
    });
});
Al usar nuestro sitio, usted reconoce que ha leído y comprende nuestra Política de Cookies y Política de Privacidad.
Licensed under cc by-sa 3.0 with attribution required.