Reading the selected value from asp RadioButtonList using jQuery

Question

I ve got code similar to the following      lt p gt  lt label gt Do you have buffet facilities  lt  label gt     lt asp RadioButtonList ID  blnBuffetMealFacilities chk  runat  server  gt       lt asp ListItem Text  Yes  Value  1  gt  lt  asp ListItem gt       lt asp ListItem Text  No  Value  0  gt  lt  asp ListItem gt     lt  asp RadioButtonList gt  lt  p gt   lt div id  HasBuffet  gt     lt p gt  lt label gt What is the capacity for the buffet  lt  label gt     lt asp RadioButtonList ID  radBuffetCapacity  runat  server  gt       lt asp ListItem Text  Suitable for upto 30 guests  value  0 to 30  gt  lt  asp ListItem gt       lt asp ListItem Text  Suitable for upto 50 guests  value  30 to 50  gt  lt  asp ListItem gt       lt asp ListItem Text  Suitable for upto 75 guests  value  50 to 75  gt  lt  asp ListItem gt       lt asp ListItem Text  Suitable for upto 100 guests  value  75 to 100  gt  lt  asp ListItem gt       lt asp ListItem Text  Suitable for upto 150 guests  value  100 to 150  gt  lt  asp ListItem gt       lt asp ListItem Text  Suitable for upto 250 guests  value  150 to 250  gt  lt  asp ListItem gt       lt asp ListItem Text  Suitable for upto 400 guests  value  250 to 400  gt  lt  asp ListItem gt     lt  asp RadioButtonList gt  lt  p gt   lt  div gt    I want to capture an event when the radio list blBuffetMealFacilities chk changes client side and perform a slide down function on the HasBuffet div from jQuery  What s the best way to create this  bearing in mind there are several similar sections on the page  where I want questions to be revealed depending on a yes no answer in a radio list

User · Answer

For my scenario  my JS was in a separate file  so using a ClientID response output wasn t conducive   Surprisingly  the solution was as simple as adding a CssClass to the RadioButtonList  which I found out on DevCurry  Just incase that solution disappears  add a class to your radio button list   lt asp RadioButtonList id  rbl  runat  server  class  tbl  gt       As the article points out  when the radio button list is rendered  the class  tbl  is appended to the surrounding table   lt table id  rbl  class  tbl  border  0  gt   lt tr gt       Now because of the CSS class that has been appended  you can just refer to input radio items within your table  based on the css class selector    function                  var  radBtn      table tbl input radio                 radBtn click function                      var  radChecked       radio checked                    alert  radChecked val                                   Again  this avoids using the  ClientID  mentioned above which I found messy for my scenario   Hope this helps

User · Answer

According to me it ll be working fine      Just try with this     var GetValue     radiobuttonListId   find   checked   val           The Radiobuttonlist value to be stored on GetValue Variable

User · Answer

this       rblDiv input   click function        alert     rblDiv input   index this          will get you the index of the radio button that was clicked  i think  untested   note you ve had to wrap your RBL in  rblDiv  you could then use that to display the corresponding div like this       divCollection div eq         rblDiv input   index this        show      Is that what you meant   Edit  Another approach would be to give the rbl a class name  then go       rblClass   val

User · Answer

The simple way to retrieve checked value of RadioButtonList1 is       RadioButtonList1 input checked   val     Edit by Tim    where RadioButtonList1 must be the ClientID of the RadioButtonList   var rblSelectedValue        lt    RadioButtonList1 ClientID   gt  input checked

User · Answer

Andrew Bullock solution works just fine  I just wanted to show you mine and add a warning     Works great       lt    radBuffetCapacity ClientID   gt  input   click function  e       var val        lt    radBuffetCapacity ClientID   gt    find  input checked   val         Do whatever         Warning - works in firefox but not IE8    used this for some time before a noticing that it didnt work in IE8    used to everything working in all browsers with jQuery when working in one        lt    radBuffetCapacity ClientID   gt    change function  e       var val        lt    radBuffetCapacity ClientID   gt    find  input checked   val         Do whatever

User · Answer

This worked for me      lt asp RadioButtonList runat  server  ID  Intent  gt     lt asp ListItem Value  Confirm  gt Yes  lt  asp ListItem gt     lt asp ListItem Value  Postpone  gt Not now lt  asp ListItem gt     lt asp ListItem Value  Decline  gt Never  lt  asp ListItem gt   lt  asp RadioButtonList gt    The handler     document  ready function             lt   Intent ClientID  gt    change function       var rbvalue      input name   lt   Intent UniqueID  gt    radio checked   val        if rbvalue     Confirm        alert  Woohoo  Thanks          else if  rbvalue     Postpone        alert  Well  I really hope it s soon         else if  rbvalue     Decline        alert  Shucks          else       alert  How d you get here  Who sent you                      The important part     input name   lt   Intent UniqueID     radio checked   val

User · Answer

The simple way to retrieve checked value of RadioButtonList1 is       RadioButtonList1 input checked   val     Edit by Tim    where RadioButtonList1 must be the ClientID of the RadioButtonList   var rblSelectedValue        lt    RadioButtonList1 ClientID   gt  input checked

User · Answer

I found a simple solution  try this   var Ocasiao               ctl00 rdlOcasioesMarcas input   each function     if  this checked    Ocasiao   this value

User · Answer

A Radio Button List instead of a Radio button creates unique id tags name 0  name 1 etc  An easy way to test which is selected is by assigning a css class like  var deliveryService      deliveryservice input   each function          if  this checked            deliveryService   this value

User · Answer

Try the below code    lt script type  text javascript  gt        document  ready function                   ratingButtons   buttonset               lt  script gt     lt asp RadioButtonList ID  RadioButtonList1  RepeatDirection  Horizontal  runat  server              AutoPostBack  True  DataSourceID  SqlDataSourceSizes      DataTextField  ProdSize              CssClass  ratingButtons  DataValueField   ProdSizeID  Font-Size  X-Small               ForeColor   666666  gt   lt  asp RadioButtonList gt

User · Answer

According to me it ll be working fine      Just try with this     var GetValue     radiobuttonListId   find   checked   val           The Radiobuttonlist value to be stored on GetValue Variable

User · Answer

A Radio Button List instead of a Radio button creates unique id tags name 0  name 1 etc  An easy way to test which is selected is by assigning a css class like  var deliveryService      deliveryservice input   each function          if  this checked            deliveryService   this value

User · Answer

Andrew Bullock solution works just fine  I just wanted to show you mine and add a warning     Works great       lt    radBuffetCapacity ClientID   gt  input   click function  e       var val        lt    radBuffetCapacity ClientID   gt    find  input checked   val         Do whatever         Warning - works in firefox but not IE8    used this for some time before a noticing that it didnt work in IE8    used to everything working in all browsers with jQuery when working in one        lt    radBuffetCapacity ClientID   gt    change function  e       var val        lt    radBuffetCapacity ClientID   gt    find  input checked   val         Do whatever

User · Answer

this       rblDiv input   click function        alert     rblDiv input   index this          will get you the index of the radio button that was clicked  i think  untested   note you ve had to wrap your RBL in  rblDiv  you could then use that to display the corresponding div like this       divCollection div eq         rblDiv input   index this        show      Is that what you meant   Edit  Another approach would be to give the rbl a class name  then go       rblClass   val

User · Answer

For my scenario  my JS was in a separate file  so using a ClientID response output wasn t conducive   Surprisingly  the solution was as simple as adding a CssClass to the RadioButtonList  which I found out on DevCurry  Just incase that solution disappears  add a class to your radio button list   lt asp RadioButtonList id  rbl  runat  server  class  tbl  gt       As the article points out  when the radio button list is rendered  the class  tbl  is appended to the surrounding table   lt table id  rbl  class  tbl  border  0  gt   lt tr gt       Now because of the CSS class that has been appended  you can just refer to input radio items within your table  based on the css class selector    function                  var  radBtn      table tbl input radio                 radBtn click function                      var  radChecked       radio checked                    alert  radChecked val                                   Again  this avoids using the  ClientID  mentioned above which I found messy for my scenario   Hope this helps

User · Answer

I voted for Vinh s answer to get the value   If you need to find the corresponding label  you can use this code       ClientID      input checked   parent   find  label   text

User · Answer

Try this      input name   lt   RadioButtonList1 UniqueID   gt    checked   val

User · Answer

I voted for Vinh s answer to get the value   If you need to find the corresponding label  you can use this code       ClientID      input checked   parent   find  label   text

User · Answer

Why so complex       id checked   val      Will work just fine

User · Answer

following is the code we eventually created  A breif explanation first  We used a  q   for the div name wrapped around the radio button question list  Then we had  s   for any sections  The following code loops through the questions to find the checked value  and then performs a slide action on the relevant section   var shows 6   function       var selected       q 7 input radio checked   val      if  selected     Groom             s 6   slideDown        else           s 6   slideUp               q 7 input   ready shows 6   var shows 7   function       var selected       q 7 input radio checked   val      if  selected     Bride             s 7   slideDown        else           s 7   slideUp               q 7 input   ready shows 7     document  ready function           q 7 input radio   click shows 6         q 7 input radio   click shows 7         lt div id  q 7  class  question   gt  lt label gt Who are you  lt  label gt      lt p gt       lt label for  ctl00 ctl00 ContentMainPane Body ctl00 ctl00 chk 0  gt Bride lt  label gt       lt input id  ctl00 ctl00 ContentMainPane Body ctl00 ctl00 chk 0  type  radio  name  ctl00 ctl00 ContentMainPane Body ctl00 ctl00 chk  value  Bride    gt     lt  p gt      lt p gt       lt label for  ctl00 ctl00 ContentMainPane Body ctl00 ctl00 chk 1  gt Groom lt  label gt       lt input id  ctl00 ctl00 ContentMainPane Body ctl00 ctl00 chk 1  type  radio  name  ctl00 ctl00 ContentMainPane Body ctl00 ctl00 chk  value  Groom    gt     lt  p gt     lt  div gt     The following allows us to make the question mandatory      lt script type  text javascript  gt   var mandatory q 7   function       var selected       q 7 input radio checked   val      if  selected                  q 7   removeClass  error             document  ready function             q 7 input radio   click function   mandatory q 7            lt  script gt     Here s an example of the actual show   hide layer   lt div class  section  id  s 6  gt        lt h2 gt Attire lt  h2 gt            lt  div gt

User · Answer

this       rblDiv input   click function        alert     rblDiv input   index this          will get you the index of the radio button that was clicked  i think  untested   note you ve had to wrap your RBL in  rblDiv  you could then use that to display the corresponding div like this       divCollection div eq         rblDiv input   index this        show      Is that what you meant   Edit  Another approach would be to give the rbl a class name  then go       rblClass   val

User · Answer

I found a simple solution  try this   var Ocasiao               ctl00 rdlOcasioesMarcas input   each function     if  this checked    Ocasiao   this value

User · Answer

This worked for me      lt asp RadioButtonList runat  server  ID  Intent  gt     lt asp ListItem Value  Confirm  gt Yes  lt  asp ListItem gt     lt asp ListItem Value  Postpone  gt Not now lt  asp ListItem gt     lt asp ListItem Value  Decline  gt Never  lt  asp ListItem gt   lt  asp RadioButtonList gt    The handler     document  ready function             lt   Intent ClientID  gt    change function       var rbvalue      input name   lt   Intent UniqueID  gt    radio checked   val        if rbvalue     Confirm        alert  Woohoo  Thanks          else if  rbvalue     Postpone        alert  Well  I really hope it s soon         else if  rbvalue     Decline        alert  Shucks          else       alert  How d you get here  Who sent you                      The important part     input name   lt   Intent UniqueID     radio checked   val

User · Answer

Try the below code    lt script type  text javascript  gt        document  ready function                   ratingButtons   buttonset               lt  script gt     lt asp RadioButtonList ID  RadioButtonList1  RepeatDirection  Horizontal  runat  server              AutoPostBack  True  DataSourceID  SqlDataSourceSizes      DataTextField  ProdSize              CssClass  ratingButtons  DataValueField   ProdSizeID  Font-Size  X-Small               ForeColor   666666  gt   lt  asp RadioButtonList gt

User · Answer

Try this      input name   lt   RadioButtonList1 UniqueID   gt    checked   val

User · Answer

this       rblDiv input   click function        alert     rblDiv input   index this          will get you the index of the radio button that was clicked  i think  untested   note you ve had to wrap your RBL in  rblDiv  you could then use that to display the corresponding div like this       divCollection div eq         rblDiv input   index this        show      Is that what you meant   Edit  Another approach would be to give the rbl a class name  then go       rblClass   val

User · Answer

Why so complex       id checked   val      Will work just fine

User · Answer

following is the code we eventually created  A breif explanation first  We used a  q   for the div name wrapped around the radio button question list  Then we had  s   for any sections  The following code loops through the questions to find the checked value  and then performs a slide action on the relevant section   var shows 6   function       var selected       q 7 input radio checked   val      if  selected     Groom             s 6   slideDown        else           s 6   slideUp               q 7 input   ready shows 6   var shows 7   function       var selected       q 7 input radio checked   val      if  selected     Bride             s 7   slideDown        else           s 7   slideUp               q 7 input   ready shows 7     document  ready function           q 7 input radio   click shows 6         q 7 input radio   click shows 7         lt div id  q 7  class  question   gt  lt label gt Who are you  lt  label gt      lt p gt       lt label for  ctl00 ctl00 ContentMainPane Body ctl00 ctl00 chk 0  gt Bride lt  label gt       lt input id  ctl00 ctl00 ContentMainPane Body ctl00 ctl00 chk 0  type  radio  name  ctl00 ctl00 ContentMainPane Body ctl00 ctl00 chk  value  Bride    gt     lt  p gt      lt p gt       lt label for  ctl00 ctl00 ContentMainPane Body ctl00 ctl00 chk 1  gt Groom lt  label gt       lt input id  ctl00 ctl00 ContentMainPane Body ctl00 ctl00 chk 1  type  radio  name  ctl00 ctl00 ContentMainPane Body ctl00 ctl00 chk  value  Groom    gt     lt  p gt     lt  div gt     The following allows us to make the question mandatory      lt script type  text javascript  gt   var mandatory q 7   function       var selected       q 7 input radio checked   val      if  selected                  q 7   removeClass  error             document  ready function             q 7 input radio   click function   mandatory q 7            lt  script gt     Here s an example of the actual show   hide layer   lt div class  section  id  s 6  gt        lt h2 gt Attire lt  h2 gt            lt  div gt

[jquery] Reading the selected value from asp:RadioButtonList using jQuery

Examples related to jquery

Examples related to asp.net

Examples related to event-handling

Examples related to radio-button