elementUI多选框获取值

elementUI种的多选框和单选框差不多,
(1)el-checkbox-group里绑定一个数组
(2)el-checkbox-group绑定一个方法获取值
(3)for循环选项,绑定key,label
(4)el-checkbox里还可以绑定disabled和checked
例子:

<template>
  <div>
    <el-checkbox-group v-model="test" @change="getValue()">
      <el-checkbox  v-for="(item,i) in items" :key="i" :label="item.content" :disabled="item.disabled" :checked="item.checked"></el-checkbox>
    </el-checkbox-group>
  </div>
</template>
<script>
export default {
  name: "HelloWorld",
  data() {
    return {
      test:[], // 默认选项,要在el-checkbox-group里绑定一个空数组
      items:[
        {id:0,content:"选项一",disabled:false,checked:true},
        {id:1,content:"选项二",disabled:true,checked:false},
        {id:2,content:"选项三",disabled:false,checked:false},
      ]
    };
  },
  methods: {
    getValue(){
      console.log(this.test)
    }
  },
};
</script>
<style lang="css" scoped>
</style>

原文地址:https://www.cnblogs.com/luguankun/p/11625897.html

时间: 2024-10-03 05:20:14

elementUI多选框获取值的相关文章

vue复选框获取值的补充

要通过vue的v-model获取选中复选框的值,可以用遍历对象的方式获取,代码如下: 1 <!DOCTYPE html> 2 <html xmlns="http://www.w3.org/1999/xhtml"> 3 <head> 4 <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/> 5 <title>

复选框获取值(包括自定义属性),拼接成字符串

//获取复选框的自定义属性did的值 $(function() { $("input[type=checkbox]").on("click", function () { var vIds = ""; $("input:checked").each(function() { vIds += $(this).attr('did') + ","; }); if (vIds.length > 0) { vI

复选框获取值

<script> function checkbox() { var str=document.getElementsByName("box"); var objarray=str.length; var chestr=""; j=0; for (i=0;i<objarray;i++) { if(str[i].checked == true) { ++j; if(chestr==""){ chestr+=str[i].value

elementUI单选框获取值

elementUI 单选框获取值有三种方法: 方法一: 如果,单选框选项不是循环得来的,并且不使用el-radio标签的 (1)给每个el-radio标签添加v-model属性,v-model的属性值是label绑定的值,label绑定的值,可以是数字,也可以是选项的内容. (2)给每个e--radio标签添加@change事件,@change事件,打印v-model绑定的值,这个值就是选中项的内容 例子: <template> <div> <div> <el-r

jQuery获取选中复选框的值代码实例

jQuery获取选中复选框的值代码实例:复选框是最为常用的表单元素之一,它提供了一种多选的方式,下面介绍一下如何使用jQuery获取选中的checkbox复选框的值.代码实例如下: <!DOCTYPE html> <html> <head> <meta charset=" utf-8"> <meta name="author" content="http://www.softwhy.com/"

使用jquery获取被选中checkbox复选框的值

使用jquery获取被选中checkbox复选框的值:checkbox是重要的表单元素,在很多多项选择中使用,下面就通过代码实例介绍一下如何获取复选框中所有被选中项的值,希望能够给需要的朋友带来一定的帮助.代码如下: <!DOCTYPE html> <html> <head> <meta charset=" utf-8"> <meta name="author" content="http://www.

jquery获取选中的checkbox复选框的值

jquery获取选中的checkbox复选框的值:checkbox复选框是常用的表单元素之一,既然使用,一般就要获取选中的复选框的值,下面就介绍一下如何使用jQuery实现此功能.代码实例如下: <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta name="author" content="http://www.softwhy.com/

mui开发中获取单选按钮、复选框的值

js获取单选按钮的值 function getVals(){ var res = getRadioRes('rds'); if(res == null){mui.toast('请选择'); return;} mui.toast(res); } function getRadioRes(className){ var rdsObj = document.getElementsByClassName(className); var checkVal = null; for(i = 0; i < rd

jquery怎样获取多个复选框的值?

jquery的遍历方法可以获取复选框所欲的选中值 1 2 $("input:checkbox:checked").each(function(index,element));   // 为所有选中的复选框执行函数,函数体中可以取出每个复选框的值 $("input:checkbox:checked").map(function(index,domElement)); // 将所有选中的复选框通过函数返回值生成新的jQuery 对象 实例演示:点击按钮获取checkbo