Vue js中如何判断一个复选框是否被选中答案

【问题标题】：How to determine whether a checkbox is checked or not in Vue jsVue js中如何判断一个复选框是否被选中
【发布时间】：2026-01-24 02:45:02
【问题描述】：

我只是想确定在 Vue js 2 中是否选中了一个复选框。在 jquery 中，我们有类似 $('input[type=checkbox]').prop('checked'); 之类的函数strong> 如果复选框被选中，它将返回 true。 Vue js中的等效函数是什么。

这是带有代码的场景。请注意，我正在使用 laravel 及其刀片模板。

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

js部分是

<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>

【问题讨论】：

您将复选框绑定到一个变量，然后监听该变量。 rolesSelected 可以是多维的。
关注这个文档vuejs.org/v2/guide/forms.html#Checkbox，它有一个很好的例子
@admcfajn rolesSelected 不是多维的。
@DharmaSaputra 我参考了每个 vuejs 官方文档，但没有找到。这就是我问的原因。
@GeordyJames 可能使用收音机而不是复选框？这样一来，一次只能选择一个。

标签： javascript laravel vue.js vuejs2

【解决方案1】：

你可以这样做：

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

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

samplefunction : function(value,event) {
    if (event.target.checked) {
       alert('isSelected');
    }
}

【讨论】：

我花了一些时间弄清楚复选框是如何工作的。它与输入文本类型不同。首先使用v-on:click 而不是v-on:input 并使用event.target.checked 而不是event.target.value。

【解决方案2】：

这对我有用。

<input type="checkbox" :id="poid" class="unchecked" name="single_select" ref="rolesSelected">

function (){
  if(this.$refs.rolesSelected.checked == false) {
    //do something
  }
}

function (){
  if(this.$refs.rolesSelected.checked == true) {
    //do something
  }
}

【讨论】：