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

最新推荐文章于 2024-05-16 10:30:37 发布
最新推荐文章于 2024-05-16 10:30:37 发布
阅读量1.6w 收藏 23
点赞数
文章标签： vue checkbox全选 radio 默认选项
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_42439024/article/details/84929284
版权

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

星辰贩卖屋_jn
关注
  • 0
    点赞
  • 踩
  • 23
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
vue .js绑定checkbox并获取、改变选中状态的实例
10-18
今天小编就为大家分享一篇vue .js绑定checkbox并获取、改变选中状态的实例，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
vue中checkbox回填与获取选中的值
code12313的博客
07-25 6378
项目用到了checkbox控件，需要从数据库获取数据，并且有的数据从数据库读取出来后就是选中状态的，在页面中选中数据后在保存到数据库中。
vue 中checkbox，radio，实现全选，默认选择，获取选中的value 以及修改checkbox，radio的样式_vue 循环复选框checkbox选择修改数值
最新发布
2401_84413180的博客
05-16 528
单选选中的id：{{rdioValue}} 单选选中的名称：{{rdioName}}多选的id:{{check}}
vue中使用Checkbox 多选框循环遍历
热门推荐
weixin_43549979的博客
08-20 1万+
首先效果展示 步骤如下： 1、html <el-form> <el-form-item v-for="(item, index) in dataList" :key="index"> <el-checkbox @change="(val) => handleCheckAllListChange(val, item)" :indeterminate="itemIndet
vue中获取复选框是否被选中的值、如何用JavaScript判断复选框是否被选中
qq_56715703的博客
10-18 2888
第一种方法：通过获取dom元素，getElementById、querySelector、getElementsByName、querySelectorAll（需要遍历，例如：for循环）在你做任何其他操作的时候判断checkboxIsChecked的值，如果为true表明选中了，再进行后续操作。第二种是用v-model在input复选框上绑定一个变量，通过双向绑定的特性来判断复选框是否被选中。第一种：被选中输出true，否则为false。选中输出true、未选中输出false。
vue radio 选中事件_前端一轮面试题(vue) 持续更新
weixin_39646018的博客
11-25 1599
mvc和mvvm理解MVCMVC即Model View Controller，简单来说就是通过controller的控制去操作model层的数据，并且返回给view层展示。View 接受用户交互请求View 将请求转交给Controller处理Controller 操作Model进行数据更新保存数据更新保存之后，Model会通知View更新View 更新变化数据使用户得到反馈MVVMMVVM即Mo...
vue el-radio 监听选中变化的实例
weixin_43167662的博客
04-10 2364
//change是radio-group标签的事件 <div> <el-radio-group v-model="radioSex" @change="changeHandler"> <el-radio class="radio" label="man">男</el-radio> <el-radio class="radio" label="woman">女</el-radio> </el-radio-group>
vue中单选和多选的获取
喜欢和羊一起玩耍的天蝎的博客
12-28 761
单选 {{radioValue}} //为了表示是同一组一般还可以给单选加上name属性 &lt;div&gt; &lt;input type="radio" value="radio01" v-model="radioValue"/&gt; radio &lt;/div&gt; &lt;div&gt; &lt;input type="radio&quot
vue使用vant中的checkbox实现全选功能
01-18
本文实例为大家分享了vue使用vant中的checkbox实现全选功能的具体代码，供大家参考，具体内容如下 (item, key=index> class=listli > <p>{{ item.name
vue+elementui实现下拉框增加checkbox并可全选或取消（完整案例及效果图）.zip
03-09
在这个特定的案例中，我们关注的是如何使用Element UI来实现一个带有复选框（checkbox）的下拉框（select），并且支持全选和取消全选的功能。下面将详细介绍这一功能的实现步骤和关键知识点。 首先，我们需要在项目...
vue checkbox 全选 数据的绑定及获取和计算方法
12-29
input type='checkbox' v-model='checkboxModel' :value='z.coach_id+-+z.amount' :i=dianji @click=lll> 第一个CheckBox <span><input type='checkbox' v-model='checked' v-on:click='checkedAll'>全选...
js表单元素checked、radio被选中的几种方法(详解)
10-21
下面小编就为大家带来一篇js表单元素checked、radio被选中的几种方法(详解)。小编觉得挺不错的，现在就分享给大家，也给大家做个参考。一起跟随小编过来看看吧
Vue自定义指令实现checkbox全选功能的方法
08-27
Vue自定义指令实现checkbox全选功能的方法 在 Vue 中，实现 checkbox 全选功能是一个常见的需求，通常我们可以使用计算属性或 watcher 来实现，但是这些方法都有其局限性，例如计算属性的复用性不高，watcher 的...
【vue】v-model与单选radio、checkbox、多选checkbox、select结合使用、以及三种修饰符展示
qq_44897899的博客
10-29 1761
代码 <div id="app"> <label for="male"> <!--name属性相同的input标签即为一组,单选框实现互斥效果（或者v-model绑定同一个变量{{}}）， 只有设置了name属性的表单元素才能在提交表单时传递它们的值。--> <input type="radio" name="sex" id="male" value="男" v-model="sex">男.
vue 复选框默认选中_vue中，radio或者checkbox如何默认选中
weixin_39955732的博客
12-22 1438
有一个rad览或讲琐了过自系一读页围这就多网解元当维io或者checkbox选项框组，如直分调浏器代，刚求的一学础过功互有解小久宗点差维含数下：:id="getId()"name="attrItem":class="inputClass":value="item.propertyValueId"v-model="checkedList">{{ item.valueData}}data() {...
vue element 用单选框实现点击不同的radio产生不同的事件
newbaby123的博客
12-24 3686
需求点击企业 不显示监控编码输入框 点击监控 显示监控编码输入框 如下图 实现思路：分别赋予两个radio不同的值，点击企业时返回 1，点击监控时返回 2，所以只要监听看看返回的数据是1还是2来决定是否要显示 监控编码输入框 代码如下： <el-form-item label="分类" prop="type"> <el-radio-group v-model="editForm.type"> <el-radio label="1"&g..
vue单选框选中_vue radio单选框,获取当前项(每一项)的value值操作
weixin_29972227的博客
12-29 6504
前言本文使用了lable关联选中，实际使用中如果不需要，直接将循环语句 v-for 写在 input标签上就可以1、使用v-for循环的radio单选框01)需要注意的是，这是使用的是 change 事件，而不是 click 点击事件{{ item.value }}2、不使用v-for循环的radio单选框01)需要注意的是，这是使用的是 change 事件，而不是 click 点击事件全部部分零...
uni的radio设置checked属性默认选中以及不刷新问题
qq_43066945的博客
04-07 9164
昨天在做uniapp的时候用到了radio这个组件，惊喜的发现一旦设置了checked属性，radio就会默认选中，动态绑定的修改都无济于事，绞尽脑汁的我只好求助csdn大佬们了，奈何一天无人问津，只好重操旧业继续琢磨，偶然间发现一篇文章很有深意，高手过招点到为止，只说了几句话就让我茅塞顿开，三下五除二，既然给我整成功了，废话不多，先上问题。 使用radio-group <radio-group @change="checkOne"> <radio @click="toShow" val
vue下的checkbox控制（全选，反选，及统计选中个数）
06-07
在Vue中实现checkbox的全选、反选及统计选中个数，可以通过以下步骤实现： 1. 在data中定义一个数组selected，用来存储选中的checkbox的值。 ``` data() { return { selected: [] } } ``` 2. 给全选的checkbox添加v-model，绑定到一个Boolean类型的变量allSelected上，当allSelected为true时，selected数组中添加所有可选项的值，当allSelected为false时，selected数组清空。 ``` <input type="checkbox" v-model="allSelected"> 全选 ``` ``` computed: { allChecked: { get() { return this.selected.length === this.options.length; }, set(val) { this.selected = val ? this.options.map(option => option.value) : []; } } } ``` 3. 给每个可选项的checkbox绑定v-model，当选中时，将该项的值添加到selected数组中。 ``` <div v-for="option in options" :key="option.id"> <input type="checkbox" v-model="selected" :value="option.value"> <label>{{ option.label }}</label> </div> ``` 4. 实现反选功能，即将selected数组中的选中项变为未选中，未选中的变为选中。 ``` reverseSelect() { const newSelected = []; this.options.forEach(option => { if (!this.selected.includes(option.value)) { newSelected.push(option.value); } }); this.selected = newSelected; } ``` 5. 统计选中的个数，即selected数组的长度。 ``` computed: { selectedCount() { return this.selected.length; } } ``` 完整代码如下： ``` <template> <div> <div> <input type="checkbox" v-model="allChecked"> 全选 </div> <div v-for="option in options" :key="option.id"> <input type="checkbox" v-model="selected" :value="option.value"> <label>{{ option.label }}</label> </div> <div> <button @click="reverseSelect">反选</button> <div>已选中{{ selectedCount }}项</div> </div> </div> </template> <script> export default { data() { return { options: [ { id: 1, label: '选项1', value: 'option1' }, { id: 2, label: '选项2', value: 'option2' }, { id: 3, label: '选项3', value: 'option3' } ], allChecked: false, selected: [] } }, computed: { allSelected: { get() { return this.selected.length === this.options.length; }, set(val) { this.selected = val ? this.options.map(option => option.value) : []; } }, selectedCount() { return this.selected.length; } }, methods: { reverseSelect() { const newSelected = []; this.options.forEach(option => { if (!this.selected.includes(option.value)) { newSelected.push(option.value); } }); this.selected = newSelected; } } } </script> ```

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值