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

最新推荐文章于 2025-06-16 03:14:02 发布

原创最新推荐文章于 2025-06-16 03:14:02 发布 · 1.6w 阅读

23 ·

CC 4.0 BY-SA版权

文章标签：

#vue #checkbox全选 #radio #默认选项

本文详细介绍了如何在Vue中使用Checkbox和Radio组件，包括全选功能的实现、默认选择状态的设置、获取选中值的方法以及自定义组件样式。通过具体代码示例，展示了如何操作这些组件以满足不同场景需求。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

这里把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实现全选的请指路，多谢