How to get dynamic checkbox checked value in ASP.NET Core using jQuery

August 11 2022 by Admin

In this article, we have described how to get dynamic checkbox checked value in ASP.NET Core using jQuery with example code.

In this article, we have described how to get dynamic checkbox checked value in ASP.NET Core using jQuery with example code. Here we are using @for loop for Checkbox items.

In this example, we have taken Roles data for binding checkboxs. You can see the example code below.

Required Namespaces

We will need to use the following namespaces.

using Microsoft.AspNetCore.Mvc;

using Microsoft.Extensions.Configuration;

using System;

using System.Collections.Generic;

using System.Linq;

using System.Threading.Tasks;

using Articles.Models;

using MySql.Data.MySqlClient;

CheckboxController

we have created Chechbox controller and get data from database using ADO.Net .

public class CheckboxController : Controller

{

private readonly string ConnectionString;

public CheckboxController(IConfiguration configuration)

{

ConnectionString = configuration["ConnectionStrings:DefaultConnection"];

}

public IActionResult Index()

{

return View(new ClassChk

{

CheckBoxValue = string.Empty,

checkboxes = GetRoles()

});

}

[HttpPost]

public IActionResult Index(ClassChk classChk)

{

return View(new ClassChk

{

CheckBoxValue = classChk.CheckBoxValue,

checkboxes = GetRoles()

});

}

public List<Checkbox> GetRoles()

{

MySqlConnection con = new MySqlConnection(ConnectionString);

MySqlCommand cmd = new MySqlCommand("Select * From tb_Roles", con);

con.Open();

MySqlDataReader idr = cmd.ExecuteReader();

List<Checkbox> Employees = new List<Checkbox>();

if (idr.HasRows)

{

while (idr.Read())

{

Employees.Add(new Checkbox

{

ChkId = Convert.ToInt32(idr["n_RoleId"]),

ChkName = Convert.ToString(idr["s_RoleName"])

});

}

con.Close();

return Employees;

}

Model

namespace Articles.Models

{

public class ClassChk

{

public string CheckBoxValue { get; set; }

public List<Checkbox> checkboxes { get; set; }

}

public class Checkbox

{

public int ChkId { get; set; }

public string ChkName { get; set; }

}

Index.Cshtml

We have created html page you can see below.

@model Articles.Models.ClassChk

<head>

<title>How to get dynamic checkbox checked value in ASP.NET Core using Jquery</title>

function onChkClick() {

var myArray = [];

$("#chkPageRole:checked").each(function () {

myArray.push(this.value);

});

$("#CheckBoxValue").val(myArray.toString());

}

</script>

</head>

<body>

<br />

@for (int i = 0; i < Model.checkboxes.Count; i++)

{

<input type="checkbox" onclick="onChkClick()" id="chkPageRole" value="@Model.checkboxes[i].ChkId" /> @Model.checkboxes[i].ChkName

</label>

</div>

}

</div>

<br />

<button type="submit" class="btn btn-primary">Submit</button>

</form>

</body>

</html>

Output

How to get dynamic checkbox checked value in ASP.NET Core using jQuery

Home > ASP.NET > How to get dynamic checkbox checked value in ASP.NET Core using jQuery

How to get dynamic checkbox checked value in ASP.NET Core using jQuery

Related Articles

How to use gridview in asp.net with C# using Mysql

01-02-2019 23:51:00 By Admin

2449 Views

How to use gridview with datatable in asp.net with C# using Mysql

03-02-2019 21:50:00 By Admin

2090 Views

How to bind gridview with datatable in asp.net with C# without using the database

03-02-2019 22:35:00 By Admin

5781 Views

How to bind gridview with datatable in asp.net with c# without using the database

03-02-2019 22:35:00 By Admin

2658 Views

How to fetch data from database in Asp.net

10-02-2019 22:05:00 By Admin

7797 Views

How to insert and retrieve data from the database in vue js using asp.net with C#

04-03-2019 07:54:00 By Admin

8569 Views

How to bind Repeater control from database in Asp.net

10-03-2019 10:51:00 By Admin

4253 Views

how to save and retrieve session value in asp.net

30-03-2019 05:59:00 By Admin

2164 Views

How to use Session variables asp.net c#

02-04-2019 11:24:00 By Admin

12236 Views

How to pass list of items using session in asp.net

02-04-2019 12:07:00 By Admin

3441 Views

Comments

Leave a Reply

Comment:^*

Please your Comment !

Email ID:^*

Enter Your Email Id ! Enter Your Validate Email Id !

Name:^*

Enter your Name !

RECENT POSTS

Technology

Information

Tags

Email Alerts

Home > ASP.NET > How to get dynamic checkbox checked value in ASP.NET Core using jQuery

Related Articles

How to use gridview in asp.net with C# using Mysql 01-02-2019 23:51:00 By Admin 2449 Views

How to use gridview with datatable in asp.net with C# using Mysql 03-02-2019 21:50:00 By Admin 2090 Views

How to bind gridview with datatable in asp.net with C# without using the database 03-02-2019 22:35:00 By Admin 5781 Views

How to bind gridview with datatable in asp.net with c# without using the database 03-02-2019 22:35:00 By Admin 2658 Views

How to fetch data from database in Asp.net 10-02-2019 22:05:00 By Admin 7797 Views

How to insert and retrieve data from the database in vue js using asp.net with C# 04-03-2019 07:54:00 By Admin 8569 Views

How to bind Repeater control from database in Asp.net 10-03-2019 10:51:00 By Admin 4253 Views

how to save and retrieve session value in asp.net 30-03-2019 05:59:00 By Admin 2164 Views

How to use Session variables asp.net c# 02-04-2019 11:24:00 By Admin 12236 Views

How to pass list of items using session in asp.net 02-04-2019 12:07:00 By Admin 3441 Views