欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  IT编程

微信小程序获取复选框全选,反选选中的值

程序员文章站 2022-06-03 09:39:56
wxml文件 wxss文件 js文件 效果图: ......

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  //单个选中的值
    })
  },
})

效果图:

微信小程序获取复选框全选,反选选中的值