ASP.NET MVC Checkbox – Complete Guide

In ASP.NET MVC, Checkbox is used when we want the user to select one or multiple options.

👉 Example:

Select Hobbies
Select Skills
Accept Terms & Conditions

In this blog, we will learn:

What is Checkbox and why we use it
Static Checkbox (manual)
Dynamic Checkbox (from SQL Server)
Save selected checkbox values
jQuery with checkbox
Proper syntax with easy explanation

1. What is Checkbox in MVC?

Checkbox allows user to:
✔ Select multiple values
✔ Enable/Disable option (true/false)

Html Helper:

@Html.CheckBoxFor()

2. Why We Use Checkbox?

We use checkbox when:

Multiple selection is required (e.g., skills)
Boolean value needed (e.g., Agree/Not Agree)
Filter data (e.g., select categories)

👉 Dropdown = single select
👉 Checkbox = multi select

3. Static Checkbox (Manual Data)

Model

public class Student
{
    public bool IsActive { get; set; }
}

View

@model Student

@Html.CheckBoxFor(m => m.IsActive)
@Html.Label("Is Active")

Multiple Static Checkbox

<input type="checkbox" name="hobby" value="Reading" /> Reading
<input type="checkbox" name="hobby" value="Sports" /> Sports
<input type="checkbox" name="hobby" value="Music" /> Music

Controller (Get Selected Values)

[HttpPost]
public ActionResult Create(FormCollection form)
{
    var hobbies = form.GetValues("hobby");

    return View();
}

Explanation

Same name="hobby" → allows multiple selection
GetValues() returns selected values

4. Dynamic Checkbox (From SQL Server)

Step 1: Table Example

Skill Table
-----------
Id     Name
1      C#
2      SQL
3      MVC

Step 2: Model

public class Skill
{
    public int Id { get; set; }
    public string Name { get; set; }
}

ViewModel (Important)

public class StudentViewModel
{
    public List<Skill> Skills { get; set; }
    public List<int> SelectedSkills { get; set; }
}

Step 3: Controller

public ActionResult Create()
{
    StudentViewModel model = new StudentViewModel();

    using (MyDbContext db = new MyDbContext())
    {
        model.Skills = db.Skills.ToList();
    }

    return View(model);
}

Step 4: View

@model StudentViewModel

@foreach (var item in Model.Skills)
{
    <div>
        <input type="checkbox"
               name="SelectedSkills"
               value="@item.Id" /> @item.Name
    </div>
}

Step 5: POST Method

[HttpPost]
public ActionResult Create(StudentViewModel model)
{
    var selectedIds = model.SelectedSkills;

    return View();
}

Explanation

Data comes from database
Loop using foreach
Same name → SelectedSkills
MVC automatically binds selected values

5. Save Checkbox Data in Database

Example:

foreach (var skillId in model.SelectedSkills)
{
    StudentSkill obj = new StudentSkill()
    {
        StudentId = 1,
        SkillId = skillId
    };

    db.StudentSkills.Add(obj);
}

db.SaveChanges();

6. jQuery with Checkbox

Get Selected Values

<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>

<script>
    $("#btnSubmit").click(function () {

        var selected = [];

        $("input[name='SelectedSkills']:checked").each(function () {
            selected.push($(this).val());
        });

        console.log(selected);
    });
</script>

Select / Unselect All Checkbox

<input type="checkbox" id="checkAll" /> Select All

<script>
    $("#checkAll").click(function () {
        $("input[name='SelectedSkills']").prop('checked', this.checked);
    });
</script>

Explanation

:checked → get selected checkbox
.each() → loop through selected items
.prop() → set checked/unchecked

7. Custom Checkbox (Static + Dynamic)

View

<div>
    <input type="checkbox" value="0" /> Select All
</div>

@foreach (var item in Model.Skills)
{
    <div>
        <input type="checkbox"
               name="SelectedSkills"
               value="@item.Id" /> @item.Name
    </div>
}

Explanation

First checkbox = static
Others = dynamic from DB
Combined in one UI

8. Important Points

✔ Use ViewModel for multiple checkbox
✔ Same name is required for binding
✔ Use List for selected values
✔ Use jQuery for better UI

9. Common Mistakes

❌ Different name for checkboxes
❌ Not using ViewModel
❌ Forgetting checked selector in jQuery
❌ Not handling null values

10. Conclusion

Checkbox in ASP.NET MVC is very useful for multi-selection scenarios.

You learned:

Static checkbox
Dynamic checkbox (SQL Server)
Save selected values
jQuery with checkbox
Custom checkbox (static + dynamic)