<view> <view> <checkbox bindtap="selectall" />全选 </view> <view>id</view> <view>名称</view> </view> <checkbox-group bindchange="checkboxChange"> <view wx:for="{{listData}}" wx:key=""> <view> <checkbox value="{{item.code}}" checked="{{item.checked}}" /> </view> <view value="{{item.text}}">{{item.code}}</view> <view value="{{item.text}}">{{item.text}}</view> </view> </checkbox-group>
wxss文件
.table{ background-color: #fff; border:1px solid #dadada; width:1200rpx; margin-left:0rpx; } .tr{ background-color: #dadada; white-space: nowrap; width:100%; display: flex; text-align: center; justify-content: center; } .th{ background-color: #fff999; text-align: center; justify-content: center; width: 100%; border-bottom: 1px solid #dadada; border-right: 1px solid #dadada; } .td{ background-color: #fff; text-align: center; justify-content: center; width: 100%; border-bottom: 1px solid #dadada; border-right: 1px solid #dadada; }
js文件
Page({ data: { select_all: false, listData: [ { code: "1", text: "测试1" }, { code: "2", text: "测试2"}, { code: "3", text: "测试3"} ], batchIds: '', //选中的ids }, //全选与反全选 selectall: function (e) { console.log(e) var that = this; var arr = []; //存放选中id的数组 for (let i = 0; i < that.data.listData.length; i++) { that.data.listData[i].checked = (!that.data.select_all) if (that.data.listData[i].checked == true){ // 全选获取选中的值 arr = arr.concat(that.data.listData[i].code.split(',')); } } console.log(arr) that.setData({ listData: that.data.listData, select_all: (!that.data.select_all), batchIds:arr }) }, // 单选 checkboxChange: function (e) { console.log(e.detail.value) this.setData({ batchIds: e.detail.value //单个选中的值 }) }, })
效果图：
总结
以上所述是小编给大家介绍的微信小程序获取复选框全选反选选中的值，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对脚本之家网站的支持！
如果你觉得本文对你有帮助，欢迎转载，烦请注明出处，谢谢！
您可能感兴趣的文章: