Comment utiliser la radio lors d'un événement de changement?


486

J'ai deux boutons radio sur l'événement de changement je veux changer de bouton Comment est-ce possible? Mon code

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

Scénario

<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
à la fois si les conditions sont comparées à «attribuer», changez-la pour transférer .. cela fonctionne bien ..
Himanth Kumar

Je crois que cela if($("input[name='bedStatus']:checked").val() == 'allot')peut être écritif($("input[name='bedStatus']").val() == 'allot')
mplungjan

2
prêt kam ma lagyu ho apdane. merci allouer thai gyu bhai.
Harsh Manvar

Réponses:


930

Vous pouvez utiliser thisce qui fait référence à l' inputélément actuel .

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

Notez que vous comparez la valeur allotà la fois si les instructions et le :radiosélecteur sont obsolètes.

Dans le cas où vous n'utilisez pas jQuery, vous pouvez utiliser les méthodes document.querySelectorAllet 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);
});

Si je réinitialise la radio d'entrée et déclenche un événement de changement de radio, quelle est la sortie réelle.?
Ashish Mehta

2
Le :radiosélecteur n'est pas obsolète (dans jQuery).
Miquel Al. Vicens

2
Juste une note: je ne comprends pas cette langue.
indéfini

7
@Piterden Tout d'abord, cette réponse a 6 ans! Les fonctions fléchées ont été introduites dans ES6 pour les situations où vous ne vous souciez pas de la thisvaleur ou si vous souhaitez utiliser la thisvaleur de contexte environnant dans votre gestionnaire, cet extrait de code utilise this. Et prétendre utiliser des fonctions régulières est une «vieille mauvaise pratique» n'a absolument aucun sens! De plus, les anciens navigateurs ne prennent pas en charge la syntaxe de la fonction flèche et Array#includeset il faut utiliser un transpilateur et un shim pour prendre en charge les anciens navigateurs. Pourquoi compliquer une réponse simple qui n'a rien à voir spécifiquement avec les fonctions fléchées?
undefined

2
Au lieu de this, j'utilise event.target.
Bobort

137

Une adaptation de la réponse ci-dessus ...

$('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
quelle est la différence entre l'utilisation de «on» et la réponse ci-dessus?
okenshield

3
@okenshield a .on()vraiment des gains par rapport à ce qui précède, cependant, si l'on prend en compte les sélecteurs dynamiques, c'est sûrement le seul moyen d'aller dans jQuery 1.7+
Ohgodwhy

5
@Ohgodwhy - ona des gains lorsque vous fournissez un contexte pour la délégation d'événement, ou même pour les sélecteurs dynamiques comme vous l'avez dit, mais la façon dont vous l'avez écrit, est exactement la même que la réponse ci-dessus.
Hugo Silva

1
Notez que le commutateur vous permet de ne pas répéter $ (this) .val (), vous devriez préférer cette version.
KyleK

36

Une manière plus simple et plus propre serait d'utiliser une classe avec la réponse de @ Ohgodwhy

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

Scénario

$( ".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
Au lieu d' $(this).is(":checked")utilisation this.checked. C'est du JS pur et c'est donc beaucoup plus rapide.
Gh61

7
@ Gh61, j'étais curieux et j'ai fait un test. Pure JS est beaucoup plus rapide .
Michael Crenshaw

9

Utiliser la fonction 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

Solution ES6 simple (javascript uniquement) .

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

Si les boutons radio sont ajoutés dynamiquement, vous pouvez utiliser

$(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");
        }
    });
});
En utilisant notre site, vous reconnaissez avoir lu et compris notre politique liée aux cookies et notre politique de confidentialité.
Licensed under cc by-sa 3.0 with attribution required.