Come usare la radio sull'evento change?

486

Ho due pulsanti di opzione sull'evento di modifica Voglio il pulsante di modifica Come è possibile? Il mio codice

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

copione

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

jquery jquery-ui

— Ashish Mehta
fonte

3

entrambi se le condizioni vengono confrontate con "assegnazione", cambiarlo per trasferirlo .. funziona benissimo ..

— Himanth Kumar,

Credo che si if($("input[name='bedStatus']:checked").val() == 'allot')possa scrivereif($("input[name='bedStatus']").val() == 'allot')

— mplungjan il

2

pronto kam ma lagyu ho apdane. grazie assegnare thai gyu bhai.

— Harsh Manvar,

930

È possibile utilizzare thische si riferisce inputall'elemento corrente .

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

Si noti che si sta confrontando il valore allotin entrambi se le istruzioni e il :radioselettore sono obsoleti.

Nel caso in cui non si stia utilizzando jQuery, è possibile utilizzare i metodi 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);
});

— non definito
fonte

Se ripristino la radio di input e innesco l'evento di cambio radio, qual è l'output effettivo?

— Ashish Mehta,

2

Il :radioselettore non è obsoleto (in jQuery).

— Miquel Al. Vicens,

2

Solo una nota: non capisco quella lingua.

— non definito il

7

@Piterden Prima di tutto, questa risposta ha 6 anni! Le funzioni freccia sono state introdotte in ES6 per le situazioni in cui o non ti interessa il thisvalore o vuoi usare il thisvalore di contesto circostante nel tuo gestore, questo snippet usa this. E affermare che usare le normali funzioni è "vecchia cattiva pratica" non ha assolutamente senso! Inoltre, i browser più vecchi non supportano la sintassi della funzione freccia Array#includese si dovrebbe usare un transpiler e uno shim per supportare i browser più vecchi. Perché fare una risposta semplice che non ha nulla a che fare specificamente con le funzioni freccia complicate?

— non definito

2

Invece di this, io uso event.target.

— Bobort,

137

Un adattamento della risposta sopra ...

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

Espandi frammento

http://jsfiddle.net/xwYx9

— Oh Dio perchè
fonte

1

qual è la differenza tra l'utilizzo di 'on' e la risposta sopra?

— Okenshield

3

@okenshield .on()ha davvero dei guadagni in relazione a quanto sopra, tuttavia, quando si tiene conto dei selettori dinamici, è sicuramente l'unico modo per andare in jQuery 1.7+

— Ohgodwhy

5

@Ohgodwhy - onha dei guadagni quando fornisci un contesto per la delega degli eventi, o anche per i selettori dinamici come hai detto, ma il modo in cui l'hai scritto è esattamente lo stesso della risposta sopra.

— Hugo Silva,

1

Nota che switch ti consente di non ripetere $ (this) .val (), dovresti preferire questa versione.

— KyleK,

36

Un modo più semplice e più pulito sarebbe usare una classe con la risposta di @ Ohgodwhy

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

copione

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

— RageAgainstTheMachine
fonte

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
fonte

19

Invece di $(this).is(":checked")usare this.checked. È JS puro e quindi è molto più veloce.

— Gh61,

7

@ Gh61, ero curioso e ho eseguito un test. Pure JS è molto più veloce .

— Michael Crenshaw,

9

Usa la funzione 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
fonte

7

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

Espandi frammento

— Simon Arnold
fonte

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
fonte

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
fonte

3

Se i pulsanti di opzione vengono aggiunti in modo dinamico, è possibile utilizzare questo

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

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
fonte