Como usar o rádio em um evento de mudança?


486

Eu tenho dois botões de opção no evento de mudança. Eu quero o botão de mudança Como é possível? My Code

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

Roteiro

<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 se as condições são comparados com 'allot', alterá-lo para transferência .. ele funciona muito bem ..
Himanth Kumar

Acredito que if($("input[name='bedStatus']:checked").val() == 'allot')pode ser escritoif($("input[name='bedStatus']").val() == 'allot')
mplungjan

2
pronto kam ma lagyu ho apdane. obrigado atribuir thai gyu bhai.
Harsh Manvar

Respostas:


930

Você pode usar o thisque se refere ao inputelemento atual .

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

Observe que você está comparando o valor com allotas instruções if e o :radioseletor estão obsoletas.

Caso você não esteja usando o jQuery, você pode usar os métodos document.querySelectorAlle 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);
});

Se eu redefinir o rádio de entrada e acionar o evento de mudança de rádio, qual é a saída real.
Ashish Mehta

2
O :radioseletor não está obsoleto (no jQuery).
Miquel Al. Vicens

2
Apenas uma observação: eu não entendo essa linguagem.
undefined

7
@Piterden Antes de mais, esta resposta tem 6 anos! As funções de seta foram introduzidas no ES6 para situações em que você não se importa com o thisvalor ou deseja usar o thisvalor de contexto circundante em seu manipulador, usado por esse snippet this. E alegar que o uso de funções regulares é uma "velha má prática" é totalmente sem sentido! Além disso, navegadores mais antigos não suportam a sintaxe da função de seta Array#includese deve-se usar um transpiler e um shim para suportar navegadores mais antigos. Por que fazer uma resposta simples que não tem nada a ver especificamente com funções de seta complicadas?
indefinido

2
Em vez de this, eu uso event.target.
Bobort

137

Uma adaptação da resposta acima ...

$('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
qual é a diferença entre usar 'on' e a resposta acima?
okenshield

3
O @okenshield .on()realmente tem ganhos em relação ao acima, no entanto, ao considerar os seletores dinâmicos, é certamente o único caminho a seguir no jQuery 1.7+
Ohgodwhy

5
@ Ohgodwhy - onobtém ganhos quando você fornece um contexto para delegação de eventos ou mesmo para seletores dinâmicos, como você disse, mas da maneira como você escreveu, é exatamente o mesmo que a resposta acima.
Hugo Silva

1
Observe que a opção permite que você não repita $ (this) .val (); você deve preferir esta versão.
KyleK

36

Uma maneira mais simples e limpa seria usar uma classe com a resposta de @ Ohgodwhy

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

Roteiro

$( ".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
Em vez de $(this).is(":checked")usar this.checked. É JS puro e, portanto, é muito mais rápido.
Gh61 13/07/16

7
@ Gh61, fiquei curioso e fiz um teste. JS puro é muito mais rápido .
Michael Crenshaw

9

Use a função 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

Solução simples ES6 (somente 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

Se os botões de opção forem adicionados dinamicamente, você poderá usar este

$(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");
        }
    });
});
Ao utilizar nosso site, você reconhece que leu e compreendeu nossa Política de Cookies e nossa Política de Privacidade.
Licensed under cc by-sa 3.0 with attribution required.