时间:2021-05-18
wxml文件
<view class="tr"> <view class="th"> <checkbox bindtap="selectall" />全选 </view> <view class="th">id</view> <view class="th">名称</view></view><checkbox-group bindchange="checkboxChange"> <view class="tr" wx:for="{{listData}}" wx:key=""> <view class="td"> <checkbox value="{{item.code}}" checked="{{item.checked}}" /> </view> <view class="td" value="{{item.text}}">{{item.code}}</view> <view class="td" 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 //单个选中的值 }) },})效果图:
总结
以上所述是小编给大家介绍的微信小程序获取复选框全选反选选中的值,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对网站的支持!
如果你觉得本文对你有帮助,欢迎转载,烦请注明出处,谢谢!
声明:本页内容来源网络,仅供用户参考;我单位不保证亦不表示资料全面及准确无误,也不保证亦不表示这些资料为最新信息,如因任何原因,本网内容或者用户因倚赖本网内容造成任何损失或损害,我单位将不会负任何法律责任。如涉及版权问题,请提交至online#300.cn邮箱联系删除。
对复选框组的全选、全不选、不全选,获取选中的复选框的值的操作1.点击全选按钮,复选框组全部选中或者全部取消。2.实现全选按钮和复选框组的联动,当复选框组中有一个
复制代码代码如下:JS获取复选框被选中的值01234567对checkbox的其他几个操作1.全选2.取消全选3.选中所有奇数4.反选5.获得选中的所有值js代
复制代码代码如下:JS获取复选框被选中的值01234567对checkbox的其他几个操作1.全选2.取消全选3.选中所有奇数4.反选5.获得选中的所有值js代
本文实例为大家分享了jQuery实现简单全选框的具体代码,供大家参考,具体内容如下1.要求:(1)实现全选框勾选时其他复选框全部选中,全选框取消勾选时其他复选框
以下是用原生js实现的复选框全选/反选的实现,选中checkbox的时候,实现全选的效果,并且样式发生改变。代码最简洁,js行为优化版,复制粘贴即可使用。复选框