Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

How to determine whether a checkbox is checked or not in Vue js

I just want to determine whether a checkbox is checked or not in Vue js 2. In jquery we have functions like $('input[type=checkbox]').prop('checked'); which will return true if checkbox is checked or not. What is the equivalent function in Vue js.

Here is the scenario with code. Please note i am using laravel with its blade templates.

@foreach ($roles as $role)    <input type="checkbox" v-on:click="samplefunction({{$role->id}})" v-model="rolesSelected" value="{{$role->id}}">                        @endforeach   

The js part is

<script>   var app = new Vue({     el: '#app1',     data: {       rolesSelected:"",     },     methods : {       samplefunction : function(value) {         // Here i want to determine whether this checkbox is checked or not          }     },   });  </script> 
like image 289
Geordy James Avatar asked Aug 08 '17 04:08

Geordy James


People also ask

How do you check if a checkbox is checked or not in Vue?

To watch for checkbox clicks in Vue. js, we can listen to the change event. to add the @change directive to the checkbox input to listen to the change event. Then we can get the checked value of the checkbox with e.

How do you know if an element is checked?

There are two properties that can be used to identify an element: the atomic number or the number of protons in an atom. The number of neutrons and number of electrons are frequently equal to the number of protons, but can vary depending on the atom in question.

How do I check if an element is a checkbox?

To check if an element is a checkbox: Use the tagName property to check if the value is an input element. Verify that the type property on the element has a value of checkbox . If both conditions are met, the element is a checkbox.


1 Answers

You can do something like:

if(this.rolesSelected != "") {    alert('isSelected'); } 

or v-on:click="samplefunction({{$role->id}},$event)"

samplefunction : function(value,event) {     if (event.target.checked) {        alert('isSelected');     } } 
like image 144
madalinivascu Avatar answered Sep 22 '22 02:09

madalinivascu