How To Check Radio Button List Item Selected Or Checked In Asp.Net Mvc Using JavaScript

This article will show you how to check radio button list item selected or checked in asp.net  mvc using JavaScript. In this we will show JavaScript alert if used select item.

Some of my previous articles are as follows: Validate Or Select Radio Button List In Asp.Net MVC Using JavaScript, Binding Or Populating Radio Button List in Asp.Net MVC Using Model, Get (fetch) RadioButtonList Checked/Selected Value In Asp.Net MVC Using JavaScript.

So for this article first we will create a new asp.net mvc application and add a mode class file and add the below model class file and 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 controller class file and add the below code into it. This we will use for passing and assigning the value to the model.

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 file and add the below code into this view file.

<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 ValidateRadioButton();" />

Now we will create the javascript function into the view and add the below code.

function ValidateRadioButton() {             var rbtDetail = document.getElementsByName("radiobutton");             var isValid = false;             for (var i = 0; i < rbtDetail.length; i++) {                 if (rbtDetail[i].checked) {                     isValid = true;                     break;                 }             }              if (isValid == true) {                 alert("Thank You : You have selected a radio button.");                 return true;             }             else {                 alert("Error : Pleae select attlease oine option");                 return false;             }        }

In above code I have get all the radiobutton list then applied loop to check the which radio button is selected from the radiobutton list.

Now check the completer code of the view.

@model MVC_Demos.Models.RadioButtonLiatModel @{     ViewBag.Title = "how to check radio button list item selectioned or checked in asp.net  mvc using javascript";     <script>         function ValidateRadioButton() {             var rbtDetail = document.getElementsByName("radiobutton");             var isValid = false;             for (var i = 0; i < rbtDetail.length; i++) {                 if (rbtDetail[i].checked) {                     isValid = true;                     break;                 }             }   if (isValid == true) {                 alert("Thank You : You have selected a radio button.");                 return true;             }             else {                 alert("Error : Pleae select attlease oine 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 ValidateRadioButton();" />

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