vue 中checkbox，radio，实现全选，默认选择，获取选中的value 以及修改checkbox，radio的样式

这里把checkbox，radio，实现全选，默认选择，获取选中的value以及修改checkbox，radio的样式放在了一个页面中了老规矩先上图1.radio单选获取其值2.checkbox获取其值以及全选功能上代码&lt;!DOCTYPE html&gt;&lt;html&gt;&lt;head&

星辰贩卖屋_jn

16148人浏览 · 2018-12-09 16:41:30

星辰贩卖屋_jn · 2018-12-09 16:41:30 发布

这里把checkbox，radio，实现全选，默认选择，获取选中的value 以及修改checkbox，radio的样式放在了一个页面中了

老规矩先上图

1.radio单选获取其值

在这里插入图片描述

2.checkbox获取其值以及全选功能

默认加载时2.4项是默认被选中的
在这里插入图片描述页面加载时默认选选择
全部选中
在这里插入图片描s述实现全选
全部不选中
全不选在这里插入图片描述

上代码

<!DOCTYPE html>  
<html>  
<head>  
    <meta charset="utf-8">  
    <title>vue-radio获取选中的值</title>  
    <script src="./js/vue.js"></script> 
</head>  
<body>  
    <div id='app' >
      <div class="rdio_box" >
        <label v-for="(item,index) in items">
          <input type="radio" name="radio"  :value="item.id"  v-model="rdioValue"@click.stop="radio_choose(item)">{{item.label}}
        </label>
      </div>
      <p>单选选中的id：{{rdioValue}} </p>
      <p>单选选中的名称：{{rdioName}}</p>
      <hr>
      <div class="checkbox_box">
         <div>
            <label :class="check.length == ckbs.length ? 'active' : ''"><input type="checkbox" v-model="all.flag" @click.stop="allchoosed()">{{all.label}}</label>
        </div>
        <div>
            <label v-for="(item, index) in ckbs">
              <input type="checkbox"  v-model="check" :value="item.id" @click.stop="checkChoose()">{{item.label}}
            </label> 
        </div>
        <p>多选的id:{{check}}</p> 
      </div>
    </div>
<script>
var vm = new Vue({
  el:'#app', 
  data(){
    return{
      // 单选
      rdioValue:'',
      rdioName:'',
      items:[
        {
          label:"vue",
          id:1,

        },
        {
          label:"React",
          id:2,
        },
        {
          label:"Bootstrap",
          id:3,
        }
      ],
      // 多选
      check: [],
      ckbs: [
        {
            id: 1,
            label: 'vue',
            flag: false,//按钮不被选中
        },
        {
            id: 2,
            label: 'Bootstrap',
            flag: true,//按钮被选中
        },
        {
            id: 3,
            label: 'React',
            flag: false
        },
        {
            id: 4,
            label: 'Foundation',
            flag: true
        }
      ],
      all:{
          label: '全选'
      }
    }
  },
  methods:{
      radio_choose:function(item){
        this.rdioName=item.label
      },
      checkChoose: function() {
        var _this = this;
        if(this.all.flag==true){
          this.all.flag=false
          _this.all.label="全选"
        }
      },
      allchoosed: function(){
        var _this = this;
        if(_this.check.length != _this.ckbs.length){
          _this.check = [];
        }
        if(_this.all.flag){
            _this.check = [];
            _this.ckbs.forEach(function(item, index){
                _this.check = [];
            });
            _this.all.flag = false;
            _this.all.label = '全选';
        }else{
            _this.ckbs.forEach(function(item, index){
                _this.check.push(item.id);
            });
            _this.all.flag = true;
            _this.all.label = '取消全选';
        }
      }
  },
  created: function(){
    //在页面加载时判断checkbox是否被选中
    var _this = this;
    var flag = true;
    _this.ckbs.forEach(function(item, indx){
        if(item.flag){
            _this.check.push(item.id);
        }
    });
  }
});
</script>
<style type="text/css">
.rdio_box{
  background-color: #ffffff;
  height: 30px;
}
/*设置radio的样式*/
.rdio_box input[type="radio"] {
    -webkit-appearance: none;  /*清除单选框默认样式*/
    background: #fff url("./images/unchecked.jpg") no-repeat;   /*单选框的背景图*/
    background-size:15px 15px;
    width: 15px;
    height: 15px;
    vertical-align: middle;
    outline: none; /*去掉自带的边框*/
}
.rdio_box  input[type="radio"]:checked {
    -webkit-appearance: none;  
    background: url("./images/check.jpg") no-repeat;
    background-size:15px 15px;
    width: 15px;
    height: 15px;
    vertical-align: middle;
    outline: none;
}
/*设置checkbox的样式*/
.checkbox_box input[type="checkbox"] {
    -webkit-appearance: none;  /*清除checkbox默认样式*/
    background: #fff url("./images/unchecked.jpg") no-repeat;   /*checkbox的背景图*/
    background-size:15px 15px;
    width: 15px;
    height: 15px;
    vertical-align: middle;
    outline: none; /*去掉自带的边框*/
}
.checkbox_box  input[type="checkbox"]:checked {
    -webkit-appearance: none;  
    background: url("./images/check.jpg") no-repeat;
    background-size:15px 15px;
    width: 15px;
    height: 15px;
    vertical-align: middle;
    outline: none;
}
</style>
</body>  
</html>

最后mint-UI中的那个checklist也很好用，但是我没弄好全选的功能，就只能投奔源生了，若看到checklist实现全选的请指路，多谢

Vue

前往低代码交流专区

更多推荐

vue 表单验证

1、6位小写字母和数字必须包含两个字母rules: [{ required: true, message: "XXX不能为空", trigger: "blur" },{ max: 6, message: "最大长度为6位字符", trigger: "blur" },{pattern: /^(?=(?:[^a-z]*[a-z]){2})[a-z0-9]{6,6}$/, //不连续的两位字母// /^