vue 中checkbox，radio，实现全选，默认选择，获取选中的value 以及修改checkbox，radio的样式_vue 循环复选框checkbox选择修改数值

最新推荐文章于 2024-08-26 18:44:07 发布

2401_85124218

最新推荐文章于 2024-08-26 18:44:07 发布

阅读量582

点赞数 2

文章标签： vue.js javascript ecmascript

本文链接：https://blog.csdn.net/2401_85124218/article/details/139581422

版权

这里把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){


### 最后

为了帮助大家更好的了解前端，特别整理了《前端工程师面试手册》电子稿文件。



![](https://img-blog.csdnimg.cn/img_convert/ebac2ab824bae173dc22054a17212598.png)

![](https://img-blog.csdnimg.cn/img_convert/5230c48fd0fcb265f3401a21603bda2b.png)