connectseekers.com

Saturday, 19 August 2017

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

8/19/2017 - By Pranav Singh 0

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.


About the Author

We are the group of people who are expertise in different Microsoft technology like Asp.Net,MVC,C#.Net,VB.Net,Windows Application,WPF,jQuery,Javascript,HTML. This blog is designed to share the knowledge.

Get Updates

Subscribe to our e-mail newsletter to receive updates.

Share This Post

0 comments:

Please let me know your view

Free Ebooks


About Us

We are the group of people who are expertise in different Microsoft technology like Asp.Net,MVC,C#.Net,VB.Net,Windows Application,WPF,jQuery,Javascript,HTML. This blog is designed to share the knowledge.

Contact Us

For writing article in this website please send request by your

GMAIL ID: dotnetpools@gmail.com
Email Id : contact@aspdotnet-pools.com

Bugs and Suggestions

As we all know that this website is for sharing knowledge and providing proper solution. So while reading the article is you find any bug or if you have any suggestion please mail us at contact@aspdotnet-pools.com.

Partners


Top jQuery Plugins

Global Classified : Connectseekers.com
© 2014 aspdotnet-pools.com Designed by Bloggertheme9.
back to top