In ASP.NET MVC, Checkbox is used when we want the user to select one or multiple options.
👉 Example:
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
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
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: