How to use radio on change event

Question

I have two radio button  on change event i want change button How it is possible  My Code    lt input type  radio  name  bedStatus  id  allot  checked  checked  value  allot  gt Allot  lt input type  radio  name  bedStatus  id  transfer  value  transfer  gt Transfer   Script   lt script gt        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                                       lt  script gt

User · Answer

Use onchage function   lt input type  radio  name  bedStatus  id  allot  checked  checked  value  allot  onchange  my function  allot    gt Allot  lt input type  radio  name  bedStatus  id  transfer  value  transfer  onchange  my function  transfer    gt Transfer   lt script gt   function my function val       alert val       lt  script gt

User · Answer

An adaptation of the above answer      x000D   x000D     input type radio  name bedStatus    on  change   function     x000D    switch    this  val      x000D      case  allot   x000D        alert  Allot Thai Gayo Bhai    x000D        break  x000D      case  transfer   x000D        alert  Transfer Thai Gayo    x000D        break  x000D      x000D      x000D   lt script src  https   cdnjs cloudflare com ajax libs jquery 3 3 1 jquery min js  gt  lt  script gt  x000D   lt input type  radio  name  bedStatus  id  allot  checked  checked  value  allot  gt Allot x000D   lt input type  radio  name  bedStatus  id  transfer  value  transfer  gt Transfer x000D   x000D   x000D    http   jsfiddle net xwYx9

User · Answer

Simple ES6  javascript only  solution    x000D   x000D  document forms demo bedStatus forEach radio   gt    x000D    radio addEventListener  change        gt    x000D      alert    document forms demo bedStatus value  Thai Gayo    x000D       x000D      x000D   lt form name  demo  gt  x000D     lt input type  radio  name  bedStatus  value  Allot  checked gt Allot x000D     lt input type  radio  name  bedStatus  value  Transfer  gt Transfer x000D   lt  form gt  x000D   x000D   x000D

User · Answer

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

User · Answer

You can use this which refers to the current input element      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   Note that you are comparing the value against allot in both if statements and  radio selector is deprecated   In case that you are not using jQuery  you can use the document querySelectorAll and HTMLElement addEventListener methods   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

User · Answer

lt input type  radio  name  radio   value  upi  gt upi  lt input type  radio  name  radio   value  bankAcc  gt Bank   lt script type  text javascript  gt    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           lt  script gt

User · Answer

A simpler and cleaner way would be to use a class with  Ohgodwhy s answer   lt input     class  rButton  gt   lt input     class  rButton  gt    Script        rButton    change function         switch   this  val              case  allot                alert  Allot Thai Gayo Bhai                break          case  transfer                alert  Transfer Thai Gayo                break

User · Answer

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

User · Answer

If the radio buttons are added dynamically  you may wish to use this    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

User · Answer

document addEventListener  DOMContentLoaded        gt      const els   document querySelectorAll   name  bedStatus         const capitalize    str    gt         str charAt 0  toUpperCase     str slice 1        const handler    e    gt  alert         capitalize e target value   Thai Gayo  e target value      allot      Bhai                 els forEach  el    gt        el addEventListener  change   handler

User · Answer

Add the class  quot pnradio quot  to the radio buttons  then switch with  attr  id    lt input type  quot radio quot  id  quot sampleradio1 quot  class  quot pnradio quot    gt   lt input type  quot radio quot  id  quot sampleradio2 quot  class  quot pnradio quot    gt          pnradio   click function               switch    this  attr  id                  case  sampleradio1                 alert  quot xxx quot                  break              case  sampleradio2                 alert  quot xxx quot                  break

[jquery] How to use radio on change event?

Examples related to jquery

Examples related to jquery-ui