Jak korzystać z radia przy zmianie zdarzenia?

486

Mam dwa przyciski opcji na zdarzeniu zmiany Chcę przycisk zmiany Jak to możliwe? Mój kod

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

Scenariusz

<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
źródło
3
zarówno jeśli warunki są porównywane z „przydziałem”, zmień je na przeniesienie .. działa dobrze ..
Himanth Kumar
Wierzę, że if($("input[name='bedStatus']:checked").val() == 'allot')można napisaćif($("input[name='bedStatus']").val() == 'allot')
mplungjan
2
gotowy kam ma lagyu ho apdane. dziękuję przydzielają tajski gyu bhai.
Harsh Manvar

Odpowiedzi:

930

Możesz użyć, thisktóry odnosi się do bieżącego inputelementu.

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

Zauważ, że porównujesz wartość allotzarówno w przypadku instrukcji, jak i :radioselektora jest przestarzała.

Jeśli nie używasz jQuery, możesz użyć metod document.querySelectorAlli 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);
});
nieokreślony
źródło
Jeśli zresetuję wejściowe radio i wywołam zdarzenie zmiany radia, jakie jest rzeczywiste wyjście?
Ashish Mehta
2
:radioSelektora nie jest przestarzała (jQuery).
Miquel Al. Vicens
2
Tylko uwaga: nie rozumiem tego języka.
niezdefiniowany
7
@Piterden Po pierwsze, ta odpowiedź ma 6 lat! Funkcje strzałek zostały wprowadzone w ES6 w sytuacjach, gdy albo nie zależy ci na thiswartości, albo chcesz użyć otaczającej thiswartości kontekstu w module obsługi, używa tego fragmentu kodu this. A twierdzenie, że używanie regularnych funkcji jest „starą złą praktyką”, jest zupełnie bez znaczenia! Ponadto starsze przeglądarki nie obsługują składni funkcji strzałek Array#includesi do obsługi starszych przeglądarek należy używać transpilatora i podkładki dystansowej. Po co tworzyć proste odpowiedzi, które nie mają nic wspólnego ze skomplikowanymi funkcjami strzałek?
niezdefiniowany
2
Zamiast tego thisużywam event.target.
Bobort,
137

Dostosowanie powyższej odpowiedzi ...

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

O boze dlaczego
źródło
1
jaka jest różnica między użyciem „on” a odpowiedzią powyżej?
okenshield,
3
@okenshield .on()naprawdę zyskał w stosunku do powyższego, jednak biorąc pod uwagę dynamiczne selektory, jest to z pewnością jedyny sposób, aby przejść do jQuery
1.7+
5
@Ohgodwhy - onzyskuje, gdy zapewniasz kontekst dla delegowania zdarzeń, a nawet dla dynamicznych selektorów, jak powiedziałeś, ale sposób, w jaki to napisałeś, jest dokładnie taki sam jak powyższa odpowiedź.
Hugo Silva,
1
Zauważ, że przełącznik pozwala ci nie powtarzać $ (this) .val (), powinieneś preferować tę wersję.
KyleK
36

Prostszym i czystszym sposobem byłoby użycie klasy z odpowiedzią @ Ohgodwhy

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

Scenariusz

$( ".rButton" ).change(function() {
    switch($(this).val()) {
        case 'allot' :
            alert("Allot Thai Gayo Bhai");
            break;
        case 'transfer' :
            alert("Transfer Thai Gayo");
            break;
    }            
});​
RageAgainstTheMachine
źródło
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
źródło
19
Zamiast $(this).is(":checked")używać this.checked. To czysty JS, a więc jest o wiele szybszy.
Gh61
7
@ Gh61, byłem ciekawy i przeprowadziłem test. Pure JS jest znacznie szybszy .
Michael Crenshaw,
9

Użyj funkcji 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
źródło
7

Proste rozwiązanie ES6 (tylko 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
źródło
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
źródło
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
źródło
3

Jeśli przyciski opcji są dodawane dynamicznie, możesz z nich skorzystać

$(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
źródło
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
źródło