Checkbox 多选框 数据为对象

Checkbox 多选框 数据为对象

Checkbox 多选框显示和绑定的值默认是一样的,源数据一般是一维数组
今天使用 Checkbox 多选框 的时候需要绑定 ID, 显示的为国际化文字,使用的源数据是对象类型
使用插槽即可, api 并为提及,后来发现在例子中有体现,特地记录一下。

 const cityOptions = [
 {id: 1, name: '上海'}{id: 2, name: '北京'}{id: 3, name: '深圳'}{id: 4, name: '广州'}
 ];
 <el-checkbox-group v-model="checkedCities">
    <el-checkbox v-for="city in cityOptions" :label="id" :key="id">{{city}}</el-checkbox>
  </el-checkbox-group>
  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
假设你有一个 checkbox 列表,每个 checkbox 对应一个数据项,那么你可以通过以下步骤将选中数据组装成 map 并传输给后端: 1. 监听 checkbox 的点击事件,当 checkbox选中或取消选中时,更新一个变量或数组,记录当前选中数据项。 示例代码: ```javascript let selectedItems = {}; // 用一个对象记录选中数据项 $('input[type="checkbox"]').on('change', function() { const itemId = $(this).val(); // 获取当前 checkbox 对应的数据项 ID if ($(this).is(':checked')) { selectedItems[itemId] = true; // 选中状态,将 ID 加入选中列表 } else { delete selectedItems[itemId]; // 非选中状态,将 ID 从选中列表中删除 } }); ``` 2. 当用户点击提交按钮时,将选中数据项组装成一个 map,传输给后端。 示例代码: ```javascript $('#submit-btn').on('click', function() { const selectedIds = Object.keys(selectedItems); // 获取所有选中数据项 ID const selectedData = {}; // 用一个对象表示选中数据 selectedIds.forEach((id) => { const itemData = getItemDataById(id); // 根据 ID 获取数据项的详细信息 selectedData[id] = itemData; // 将数据项信息添加到选中数据中 }); // 发起 AJAX 请求,将选中数据传输给后端 $.ajax({ url: '/api/submit', method: 'POST', data: JSON.stringify(selectedData), contentType: 'application/json', success: function(response) { alert('提交成功!'); }, error: function(xhr, textStatus, error) { alert('提交失败:' + error); } }); }); ``` 需要注意的是,这里将选中数据项组装成了一个对象,其中对象的键为数据项的 ID,值为数据项的详细信息。你需要根据实际情况修改 `getItemDataById` 函数,根据 ID 获取数据项的详细信息,例如从页面中获取、从后端获取等。另外,需要将选中数据以 JSON 格式传输给后端,这里使用了 jQuery 的 AJAX 函数来发起 POST 请求。

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

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

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

_pengliang

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

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

余额充值