微信小程序获取复选框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]);
        }
    }

 

  • 1
    点赞
  • 19
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
针对您的问题,可能是因为您的代码中的索引出现了问题,导致选择第七个总是显示最后一个。以下是一个简单的示例代码,可能会对您有所帮助: ```html <view class="checkbox-group"> <label wx:for="{{checkboxItems}}" wx:key="{{item.value}}" class="checkbox"> <checkbox value="{{item.value}}" checked="{{item.checked}}" bindchange="checkboxChange">{{item.name}}</checkbox> </label> </view> ``` ```javascript Page({ data: { checkboxItems: [ { name: '选项1', value: '1', checked: false }, { name: '选项2', value: '2', checked: false }, { name: '选项3', value: '3', checked: false }, { name: '选项4', value: '4', checked: false }, { name: '选项5', value: '5', checked: false }, { name: '选项6', value: '6', checked: false }, { name: '选项7', value: '7', checked: false }, ], }, checkboxChange: function (e) { const checkboxItems = this.data.checkboxItems; const values = e.detail.value; for (let i = 0, lenI = checkboxItems.length; i < lenI; ++i) { checkboxItems[i].checked = false; for (let j = 0, lenJ = values.length; j < lenJ; ++j) { if (checkboxItems[i].value === values[j]) { checkboxItems[i].checked = true; break; } } } this.setData({ checkboxItems, }); }, }); ``` 在这个示例代码中,我们使用了 `wx:for` 来循环渲染复选框选项,使用 `checkbox` 组件来实现复选框,使用 `checked` 属性来控制是否选中。在选择状态发生改变时,我们通过 `bindchange` 事件和 `checkboxChange` 方法来处理复选框的选择状态,并更新数据。您可以根据自己的实际需求进行修改和优化。

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值