Wie benutze ich Radio bei einem Wechselereignis?

486

Ich habe zwei Optionsfelder beim Änderungsereignis. Ich möchte den Änderungsknopf. Wie ist das möglich? Mein Code

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

Skript

<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
quelle
3
beide, wenn Bedingungen mit 'Zuteilung' verglichen werden, ändern Sie es in Übertragung .. es funktioniert gut ..
Himanth Kumar
Ich glaube, if($("input[name='bedStatus']:checked").val() == 'allot')kann geschrieben werdenif($("input[name='bedStatus']").val() == 'allot')
mplungjan
2
bereit kam ma lagyu ho apdane. danke allot thai gyu bhai.
Harsh Manvar

Antworten:

930

Sie können verwenden, thiswas sich auf das aktuelle inputElement bezieht .

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

Beachten Sie, dass Sie den Wert allotin beiden :radioFällen vergleichen, wenn Anweisungen und Selektor veraltet sind.

Falls Sie jQuery nicht verwenden, können Sie die Methoden document.querySelectorAllund HTMLElement.addEventListenerverwenden:

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);
});
nicht definiert
quelle
Was ist die tatsächliche Ausgabe, wenn ich das Eingangsradio zurücksetze und ein Funkwechselereignis auslöse?
Ashish Mehta
2
Der :radioSelektor ist nicht veraltet (in jQuery).
Miquel Al. Vicens
2
Nur eine Anmerkung: Ich verstehe diese Sprache nicht.
undefiniert
7
@Piterden Zuallererst ist diese Antwort 6 Jahre alt! In ES6 wurden Pfeilfunktionen für Situationen eingeführt, in denen Sie sich entweder nicht für den thisWert interessieren oder den umgebenden Kontextwert thisin Ihrem Handler verwenden möchten, den dieses Snippet verwendet this. Und zu behaupten, reguläre Funktionen zu verwenden, sei "alte schlechte Praxis", ist absolut bedeutungslos! Außerdem unterstützen ältere Browser die Pfeilfunktionssyntax nicht Array#includesund man sollte einen Transpiler und eine Unterlegscheibe verwenden, um ältere Browser zu unterstützen. Warum eine einfache Antwort, die nichts speziell mit Pfeilfunktionen zu tun hat, kompliziert machen?
undefiniert
2
Stattdessen thisbenutze ich event.target.
Bobort
137

Eine Anpassung der obigen Antwort ...

$('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 Gott warum
quelle
1
Was ist der Unterschied zwischen der Verwendung von "Ein" und der obigen Antwort?
Okenshield
3
@okenshield hat .on()wirklich Gewinne in Bezug auf die oben genannten, aber wenn man dynamische Selektoren berücksichtigt, ist es sicherlich der einzige Weg, um in jQuery 1.7+
Ohgodwhy
5
@Ohgodwhy - onhat Vorteile, wenn Sie einen Kontext für die Ereignisdelegierung oder sogar für dynamische Selektoren bereitstellen, wie Sie sagten, aber die Art und Weise, wie Sie ihn geschrieben haben, entspricht genau der obigen Antwort.
Hugo Silva
1
Beachten Sie, dass Sie mit switch $ (this) .val () nicht wiederholen können. Sie sollten diese Version bevorzugen.
KyleK
36

Eine einfachere und sauberere Möglichkeit wäre, eine Klasse mit der Antwort von @ Ohgodwhy zu verwenden

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

Skript

$( ".rButton" ).change(function() {
    switch($(this).val()) {
        case 'allot' :
            alert("Allot Thai Gayo Bhai");
            break;
        case 'transfer' :
            alert("Transfer Thai Gayo");
            break;
    }            
});​
RageAgainstTheMachine
quelle
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
quelle
19
Anstelle von $(this).is(":checked")Gebrauch this.checked. Es ist reines JS und daher viel schneller.
Gh61
7
@ Gh61, ich war neugierig und habe einen Test durchgeführt. Pure JS ist viel schneller .
Michael Crenshaw
9

Verwenden Sie die Onchage- Funktion

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

Einfache ES6- Lösung (nur 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
quelle
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
quelle
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
quelle
3

Wenn die Optionsfelder dynamisch hinzugefügt werden, möchten Sie dies möglicherweise verwenden

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