¿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>
Ashish Mehta
fuente
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);
});
indefinido
fuente
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

Oh Dios por qué
fuente
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;
    }            
});​
Rabia contra la máquina
fuente
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

bromelio
fuente
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>
Sandeep Kumar
fuente
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>

Simon Arnold
fuente
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);
  });
});
Piterden
fuente
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>
Gupta Nambula
fuente
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;
    }     
});
StripyTiger
fuente
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");
        }
    });
});
Ram Samuj
fuente