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

August 11 2022 by Admin 3824 Views

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

Comments

Leave a Reply

Comment:^*

Please your Comment !

Email ID:^*

Enter Your Email Id ! Enter Your Validate Email Id !

Name:^*

Enter your Name !

Techonogy

Information

Tags

Email Alerts