jquery - eventos - ¿Cómo usar la radio en el evento de cambio?

jquery select radio checked by name

Question

Tengo dos botones de opción en el evento de cambio 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>

Answer 1

Puede usar this que se refiere al elemento de input 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 el valor allot tanto en las declaraciones if como en :radio selector de :radio está en desuso.

En caso de que no esté utilizando jQuery, puede usar los métodos document.querySelectorAll y 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);
});

Answer 2

Simple solución ES6 (solo javascript) .

Array.prototype.forEach.call(document.forms.demo.bedStatus, 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>

Answer 3

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

http://jsfiddle.net/xwYx9/

Answer 4

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

Answer 5

Utilizar la función de 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>

Answer 6

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

Answer 7

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

Answer 8

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