vue前端复选框,判断用户是否选中,而且将状态保存到数据库中

最新推荐文章于 2025-04-14 11:46:15 发布

原创最新推荐文章于 2025-04-14 11:46:15 发布 · 974 阅读

2 ·

CC 4.0 BY-SA版权

文章标签：

#前端 #javascript #java

MonicaTeaCat 专栏收录该内容

24 篇文章

订阅专栏

文章展示了一个使用Vue.js编写的前端页面，通过v-model和v-for指令动态渲染checkbox列表，item.xuanze字段以字符串1和0表示选中状态。当用户改变选择时，handleChange方法更新选中状态，并将值同步到对应的tableData字段。代码中包含一个简单的十选n场景，处理选中和取消选中的逻辑，并在提交时将item数组的值赋给tableData1-10的xuanze字段。

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

初次测试用的字符串形式,后期有改进可以直接设为boolean.

"1"是选中

"0"是未选中

前端页面代码:

       <template>
          <div>
            <div v-for="(item, index) in items" :key="index">
              <label>
                <input type="checkbox" v-model="item.xuanze" @change="handleChange(item)">
                {{ item.name }}
              </label>
            </div>
          </div>

比较经典,比较简单, 这里用item数组保存相关选项名字:

data():

items: [
                    {name: '1# ', xuanze: 0, tableData: []},
                    {name: '2# ', xuanze: 0, tableData: []},
                    {name: '3# ', xuanze: 0, tableData: []},
                    {name: '4# ', xuanze: 0, tableData: []},
                    {name: '5# ', xuanze: 0, tableData: []},
                    {name: '6# ', xuanze: 0, tableData: []},
                    {name: '7# ', xuanze: 0, tableData: []},
                    {name: '8# ', xuanze: 0, tableData: []},
                    {name: '9# ', xuanze: 0, tableData: []},
                    {name: '10#', xuanze: 0, tableData: []},
                ],

比较经典的十选n,

method代码:



            handleChange(item) {
                item.xuanze = event.target.checked ? '1' : '0';
                const tableDataNames = [];
                for (let i = 1; i <= 11; i++) {
                    const num = i.toString();
                    tableDataNames.push('tableData' + num);
                    console.log( tableDataNames)
                }
                for (let i = 0; i < this.items.length; i++) {
                    if (item.name === this.items[i].name) {
                        const tableData = this[tableDataNames[i]];
                        if (tableData) {
                            tableData.xuanze = item.xuanze;
                            console.log(tableData.xuanze);
                        }
                        break;
                    }
                }
            },

这里需要把item的值再赋给自己需要传给后端的值,
我这里是tableData1-10各自的"xuanze"字段,

选中的话返回1,无默认值是空可以设置默认值为0,选中后再取消选中的话是0

最后提交表单时候会把item数组里的值一一赋值给自己表的值,

肯定还会有更优效的方法,欢迎有思路的同学评论讨论