Get (fetch) RadioButtonList Checked/Selected Value In Asp.Net MVC Using JavaScript

This article will show you can get or fetch radiobuttonlist checked/selected value in asp.net mvc using javascript. In this I help you on getting selected radio button value from a radio button list using c#.net in masp.net mvc.

Please have a look of the few of my previous articles: Validate Or Select Radio Button List In Asp.Net MVC Using JavaScript, Binding Or Populating Radio Button List in Asp.Net MVC Using Model.

Now for this article first we will create a new asp.net mvc application and add a model class file. After adding mode class file we will add the below code.

using System; using System.Collections.Generic; using System.Linq; using System.Web; namespace MVC_Demos.Models {     public class RadioButtonLiatModel     {         public List<RadioButtonData> RadioButtonListData { get; set; }     }     public class RadioButtonData     {         public int Id { get; set; }         public string Value { get; set; }     } }

After this we will add a model class file and write code to add some value to the model which we will display on screen.

using MVC_Demos.Models; using System; using System.Collections.Generic; using System.Linq; using System.Web; using System.Web.Mvc; namespace MVC_Demos.Controllers {     public class RadioButtonListController : Controller     {         //         // GET: /RadioButtonList/         public ActionResult Index()         {             RadioButtonLiatModel _radiobuttonliatmodel = new RadioButtonLiatModel();             _radiobuttonliatmodel.RadioButtonListData = new List<RadioButtonData>();             _radiobuttonliatmodel.RadioButtonListData.Add(new RadioButtonData { Id = 1, Value = "Item 1" });             _radiobuttonliatmodel.RadioButtonListData.Add(new RadioButtonData { Id = 2, Value = "Item 2" });             _radiobuttonliatmodel.RadioButtonListData.Add(new RadioButtonData { Id = 3, Value = "Item 3" });             _radiobuttonliatmodel.RadioButtonListData.Add(new RadioButtonData { Id = 4, Value = "Item 4" });             return View(_radiobuttonliatmodel);         }     } }

After this we will create a view and add the below code into it.

@model MVC_Demos.Models.RadioButtonLiatModel @{     ViewBag.Title = "Get (fetch) RadioButtonList Checked/Selected Value In Asp.Net MVC Using JavaScript";     <script>         function ValidateAndGetRadioButtonValue() {             var rbtDetail = document.getElementsByName("radiobutton");             var value = "";             for (var i = 0; i < rbtDetail.length; i++) {                 if (rbtDetail[i].checked) {                     value = rbtDetail[i].value;                     break;                 }             }             if (value != "") {                 alert("You have selected : " + value);                 return true;             }             else {                 alert("Error : Pleae select attlease one option");                 return false;             }         }     </script> } <h2>RadioButton List</h2> <br /> @foreach (var item in Model.RadioButtonListData) {     <input type="radio" id="@item.Id" value="@item.Value" name="radiobutton"/>@item.Value } <br /> <input type="button" value="Submit" onclick="javascript: return ValidateAndGetRadioButtonValue();" />

In above code have a look of the written javascript. In this code I have get the array of radio button present on page by name and then validated which one is selected. After that getting the selected value I have store the value into the value variable and then on the bases of the value I have displayed the value of radio button from radio button list.

One more thing we need to assign the model value to the radiobutton to value attribute.

Now we have done. Run the application to check the output.