支付宝小程序获取复选框选中值id，使其显示且可编辑

问题概述

在做支付宝小程序编辑表单时，需要将用户之前填、选的信息显示出来后再编辑。这里针对复选框选中值的获取显示，通过服务端发送请求后拿到的选中id，显示选中值并且可编辑。

axml代码片段

<checkbox-group onChange="onChange" name="Yylb_id" class="checkboxspace1"><label class="checkbox" a:for="{{languageData.items}}" key="label-{{index}}"><checkbox value="{{item.id}}" checked="{{item.checked}}"/><text class="checkbox-text1">{{item.value}}</text></label>
</checkbox-group>

acss代码片段

.checkboxspace1{width: 410rpx;height: 90rpx;}
.checkbox {margin-bottom: 4rpx; position: static;}
.checkbox-text1 {line-height: 1.2;margin-right: 40rpx;margin-left: 5rpx;}

Javascript代码片段

语言选择类别的数据结构（data.js）：

{"id": "1","value": "中文简体"
},
{ "id": "2","value": "英语"
}
......

page中设置存放复选框id和内容的data：

Page({data: {//语言选择类别languageData:{items: [], //存放语言类别的数据},languageId: "", //选中的id，用来提交给后台}
})

从服务端获取复选框选中id并找出对应内容显示：

const jsonData = require('../data.js');
onshow(){ //页面加载出来即显示相应信息var languageList = Array(); //语言选择类别languageList = jsonData.languageJsonList; //本地复选框内容var languageidarray = Array(); //定义数组存放获取的选中id//判断字符串是否存在数组中function isStrInArray(str, arr) {let n = arr.length;for (let i = 0; i < n; i++) {if (arr[i] == str) { return true; }}return false;}//获取选中id并拆分，通过选中id找到对应选中内容并显示选中if(weblist.data.Yylb_id != null){ //判断服务端拿到的选中id值languageidarray = weblist.data.Yylb_id.split(';');//拆分选中idfor(var j=0; j<languageList.length;j++){if( this.isStrInArray(languageList[j].id, languageidarray) ){languageList[j].checked = true;}else{languageList[j].checked = false;}}}else{ languageidarray = null } //显示选中值为空//设置显示选中值that.setData({ languageData: Object.assign(that.data.languageData,{items: languageList}),languageId: languageidarray})
}

获取当前选中值，并且设置选中值在小程序页面显示（可编辑状态）：

onChange(e) { let that = this;that.setData({ languageId: e.detail.value });
}

说明：
服务端拿到的选中值id，需要发送request请求拿，由于对接口的保密，这里没有写发请求片段，拿到的选中id数组大概是这样的[“1”;“2”;“3”]

支付宝小程序获取复选框选中值id，使其显示且可编辑相关推荐

微信小程序获取多选框选中值和选中值对应的id
微信小程序开发交流qq群 173683895 承接微信小程序开发.扫码加微信. 官方文档中只有获取多选框的值的方法,但是我需要获取选中的值同时还要获取选中值对应的id,但是又不能操作DOM获 ...
js怎么获取复选框选中的值
本篇文章主要给大家介绍js获取复选框选中的值的实现方法. js获取复选框选中的值的方法实现,对于新手小白来说可能有一定的难度. 下面我们就结合具体的代码示例为大家详细介绍js实现获取复选框中选中的值的 ...
微信小程序之复选框打对号
微信小程序之复选框checkbox打对号一.实现效果二.实现原理: 在父view中嵌套另一个子view. 父view显示所有边框. 子view显示右边框和下边框并顺时针旋转45度.运用margin ...
html简单获取多选框的,jquery获取复选框的值的简单实例
JS获取复选框被选中的值 0 1 2 3 4 5 6 7 JS代码对checkbox的其他几个操作 1. 全选 2. 取消全选 3. 选中所有奇数 4. 反选 5. 获得选中的所有值 js代码 $( ...
JQ对复选框全选、获取复选框的值、回选
1.全选.全不选: function checkAllFun(a){if (a.checked){$("input[name='checkbox']:checkbox").each ...
layui获取复选框的值
layui获取复选框的值 //HTML代码 <form class="layui-form"> <div class="layui-form-i ...
用jQuery如何获取复选框的值
获取复选框的值 <div><input type="checkbox" name="" id="suibian">& ...
Layui 获取复选框的值
Layui获取复选框的值: 遍历input复选框,然后将当前遍历的对象的Value加入数组: //定义数组: var OneValue=[]; //取值 $(`input:checkbox[name= ...
js 获取复选框选中的值
一单选框的值代码: $("input[type='radio']:checked").val() 二获取多选框的值: 思路:利用name属性值获取checkbox对象,然后循 ...