How to determine whether a checkbox is checked or not in Vue js
Stefan Izdrail
Founder & Senior Architect · 2026-06-29
Title: Determining Checkbox State in Vue JS - A Comprehensive Guide for Developers
In today's fast-paced world of frontend development, JavaScript frameworks have become increasingly popular. One such library is Vue Js, which offers a simple yet powerful way to build dynamic user interfaces. With its component-based architecture and two-way data binding system, it has gained significant traction among developers. In this post, we will explore how to determine whether a checkbox is checked or not in Vue JS.
Let's start with a basic scenario. Assume you are working on Laravel application with a list of roles that need to be assigned to users. You want to create a simple checklist to select which roles should be assigned to particular users while using Vue JS for frontend development:
```HTML
@foreach ($roles as $role)
@endforeach
```
With the Vue instance defined in the script tag, you can easily determine whether a checkbox is checked or not. Let's dive into the code:
```Javascript
var app = new Vue({
el: '#app1',
data: {
rolesSelected:"",
},
methods : {
samplefunction : function(value) {
// Here, i want to determine whether this checkbox is checked or not
}
},
});
```
The Vue Js `v-model` directive is used here to bind the data between the component and the Vue instance. By assigning an empty string "" as the initial value for rolesSelected, you can keep track of the chosen role ids. To check whether a specific checkbox is checked or not inside the samplefunction, you can use the following method:
```Javascript
var checkboxValues = this.rolesSelected.split(',');
if (indexOf(checkboxValues, value) !== -1) {
// This checkbox is checked
} else {
// This checkbox is not checked
}
```
Here, "value" refers to the role id that needs to be checked. The `indexOf()` function returns the position of the value inside the array if found, or -1 if it's missing. If the indexOf() result is not equal to -1, then the checkbox is checked; otherwise, it's unchecked.
In summary, determining whether a checkbox is checked or not in Vue Js can be achieved by utilizing the v-model directive and data binding between the view and instance. This approach allows for easy manipulation of checked roles without needing to rely on external functions like jQuery's prop('checked'). By incorporating this knowledge into your Laravel application, you can create efficient and user-friendly interfaces with Vue JS.