微信小程序获取复选框checkbox选中的值

wxml:

<checkbox-group bindchange="checkboxChange">
                <label class="weui-cell weui-check__label" wx:for="{{checkboxItems}}" wx:key="value">
                    <checkbox class="weui-check" value="{{item.Name}}" checked="{{item.checked}}"/>
                    <view class="weui-cell__hd weui-check__hd_in-checkbox">
                        <icon class="weui-icon-checkbox_circle" type="circle" size="23" wx:if="{{!item.checked}}"></icon>
                        <icon class="weui-icon-checkbox_success" type="success" size="23" wx:if="{{item.checked}}"></icon>
                    </view>
                    <view class="weui-cell__bd">{{item.Name}}</view>
                </label>
       </checkbox-group>

 js:

动态获取复选框的列表

 wx.request({
      url: 'url地址',
      method: 'POST',
      data: {},
      header: {
        'content-type': 'application/x-www-form-urlencoded',
      },
      success: function (res) {
        console.log(res);
        console.log(res.data.data);
        that.setData({
          checkboxItems:res.data.data
        });
      }
    })

复选框改变绑定的函数

 checkboxChange: function(e) {
    //console.log(e);
    //console.log(e.detail);
    //console.log('checkbox发生change事件,携带value值为:', e.detail.value);
    var checkboxItems = this.data.checkboxItems,
      values = e.detail.value;
    for (var i = 0, lenI = checkboxItems.length; i < lenI; ++i) {
      checkboxItems[i].checked = false;
      for (var j = 0, lenJ = values.length; j < lenJ; ++j) {
        if (checkboxItems[i].Name == values[j]) {
          checkboxItems[i].checked = true;
          break;
        }
      }
    }
    this.setData({
      checkboxItems: checkboxItems
    });
  },

筛选数复选框选中的值并添加到指定的数组中

var selected = [];//当前选择到的值
    for(var i=0; i<checkboxItems.length;i++){
        if(checkboxItems[i].checked == true){
          selected.push(checkboxItems[i]);
        }
    }
发布了139 篇原创文章 · 获赞 27 · 访问量 24万+

猜你喜欢

转载自blog.csdn.net/chunchun1230/article/details/104518846