vue绑定单选框（radio）和复选框（CheckBox）

最新推荐文章于 2025-06-17 16:06:56 发布

三千繁华--成双

最新推荐文章于 2025-06-17 16:06:56 发布

阅读量5.6k

点赞数

CC 4.0 BY-SA版权

本文链接：https://blog.youkuaiyun.com/weixin_43931427/article/details/88528532

前端专栏收录该内容

3 篇文章

订阅专栏

本文介绍了如何在Vue.js应用中使用HTML和JavaScript进行数据绑定，以实现单选框（Radio）和复选框（Checkbox）的功能。通过HTML部分的定义和Vue实例的数据绑定，可以实现对用户选择状态的响应式更新。

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

在这里插入图片描述

html部分

  <div style="width:500px;margin:50px auto;display:flex;flex-direction:column;">
        <div style="font-weight:600;font-size:18px">问卷调查</div>
        
        <div v-for="(item,index) in question" :key="index" style="padding-top:10px">
          <div style="margin-bottom:10px">{{item.title}}</div>
          <div v-if="item.sex" style="display:flex;align-items:center;">
          
            <div v-for="(item2,index2) in item.sex" :key="index2" @click="chooseSex(item2)" style="margin-right:20px">
              <input type="radio" :value="item2" v-model="radio2">  <span>  {{item2}}</span>
            </div>
          </div>

          <div v-if="item.item" style="display:flex;align-items:center;">
            <div v-for="(item3,index3) in item.item" :key="index3"  @click="chooseHobbied(item3)"  style="margin-right:20px">
              <input type="checkbox" :value="item3" v-model="checkbox"><span>  {{item3}}</span>
            </div>
          </div>
        </div>
      </div>

vue数据绑定

data() {
  return {
    radio2:'',
    checkbox:[],
    question:[
      {
        title:"1、请选择你的性别",
        sex:[
          '男','女'
        ]
      },
      {
        title:"2、请选择你的爱好",
        item:[
          '打球','读书','画画','游泳','跑步'
        ]
      }
    ], 
  };
},

js部分

//单选框radio选中值的改变
chooseSex(item){
        this.radio2 = item;
        console.log("点击",item,"值",this.radio2);
      },
      
       //复选框checkbox多项选择后的值，及取消选中后的其他值
      chooseHobbied(item){
        if(box.indexOf(item) === -1){
          box.push(item);
          this.checkbox = box;
          console.log("点击",item,"值",box);
        }else{
            box.splice(box.indexOf(item),1);
          console.log("box值",box);
          this.checkbox = box;
        }
      },