关于复选框checkbox的选中问题

问题是,怎么通过后端传过来的数据(直接是分类的json字符串)来自动选择好前端的checked属性。

1.业务的需求是前端显示一个复选框,如图所示。

2.前端代码如下:

主要通过<c:if test="${fn:contains(product.zerenType,'1')}">checked</c:if>来判断是否选中了该分类。

<div class="layui-form-item layui-form-text"> <label class="layui-form-label">责任分类</label> <div class="layui-input-block"> <input type="checkbox" name="zerenType" value="1" <c:if test="${fn:contains(product.zerenType,'1')}">checked</c:if>>身故(不含全残) <input type="checkbox" name="zerenType" value="2" <c:if test="${fn:contains(product.zerenType,'2')}">checked</c:if>>身故(含全残) <input type="checkbox" name="zerenType" value="3" <c:if test="${fn:contains(product.zerenType,'3')}">checked</c:if>>疾病 <input type="checkbox" name="zerenType" value="4" <c:if test="${fn:contains(product.zerenType,'4')}">checked</c:if>>医疗 <input type="checkbox" name="zerenType" value="5" <c:if test="${fn:contains(product.zerenType,'5')}">checked</c:if>>意外 <input type="checkbox" name="zerenType" value="6" <c:if test="${fn:contains(product.zerenType,'6')}">checked</c:if>>意外医疗 </div> </div>

后端接收后通过转成string存入数据库

String[] zerenTypes  = request.getParameterValues("zerenType");//责任分类

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
要获取 Vant 复选框Checkbox)勾选中的哪一行的值,你可以借助 Vue.js 的双向绑定和事件监听来实现。 首先,你需要在 Vue 实例的 data 中定义一个数组用于存储选中的行的值。例如: ```javascript data() { return { selectedRows: [] // 用于存储选中的行的值 } } ``` 接下来,在复选框组件中,你需要使用 v-model 指令将选中状态绑定到一个计算属性,并在复选框组件上添加一个 change 事件监听器。例如: ```html <van-checkbox v-model="selectedRows" @change="handleCheckboxChange(rowData)"> <!-- 复选框的内容 --> </van-checkbox> ``` 在上述代码中,我们将复选框选中状态绑定到 `selectedRows` 数组,并在复选框上添加了一个 `change` 事件监听器,调用 `handleCheckboxChange` 方法,并传递当前行的数据 `rowData`。 最后,在 Vue 实例中定义 `handleCheckboxChange` 方法,用于处理复选框勾选状态的改变。在该方法中,你可以根据需要对选中和取消选中的行进行相应的处理。例如: ```javascript methods: { handleCheckboxChange(rowData) { if (this.selectedRows.includes(rowData)) { // 取消选中 // 在这里可以进行相应的操作,比如从 selectedRows 数组中移除该行的值 const index = this.selectedRows.indexOf(rowData); if (index > -1) { this.selectedRows.splice(index, 1); } } else { // 选中 // 在这里可以进行相应的操作,比如将该行的值添加到 selectedRows 数组中 this.selectedRows.push(rowData); } } } ``` 在上述代码中,我们通过判断 `selectedRows` 数组中是否包含当前行的数据 `rowData`,来决定是取消选中还是选中。根据需要,你可以在相应的分支中进行处理。 通过以上的代码,你就可以获取到 Vant 复选框选中的哪一行的值,并根据需要进行相应的操作。

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

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

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值