zoukankan      html  css  js  c++  java
  • 微信小程序 checked 选择功能 js中获取对应的选择值的改变以及修改

    要在js中获取checkbox选择值 必须在外面包裹一个checkbox-group

    wxml 代码

      <scroll-view class="s_view" scroll-y="true">
            <block wx:for="{{list}}" wx:key="{{this}}">
                <view class="m_item" wx:key="{{index}}">
                    <view class="m_left">
                        <checkbox-group bindchange="checkboxChange" data-index="{{index}}">
                            <label class="change_check">
                                <checkbox class="child" value="{{item.name}}" checked="{{item.checked}}"></checkbox>
                            </label>
                        </checkbox-group>
                        <image class="m_img" src="{{'../../../../'+item.img}}"></image>
                        <view class="m_text">
                            <text class="m_name">{{item.name}}</text>
                            <text class="m_num">{{item.num}}</text>
                            <text class="m_btn"></text>
                        </view>
                    </view>
                    <view class="m_icon">
                        <text class="m_del"></text>
                        <text class="m_edit"></text>
                    </view>
                </view>
            </block>
        </scroll-view>

    index.js中代码

     checkboxChange(e) {
        var arr = [...this.data.list];
        var postIndex=e.currentTarget.dataset.index;
        var len=e.detail.value.length;
        //选中
          arr.forEach((item,index)=>{
            if(index===postIndex){
              item.checked=(len!=0);
            }
          })
          //更新数据
          this.setData({
            list:arr
          },()=>{
            //处理选中的数组获取其长度
            var result=this.dealArr(this.data.list).length;
            //更新数据
            this.setData({
              arrLength:result
            })
          })
      },
      //过滤选中的数组
      dealArr(arr){
        return arr.filter((item,index)=>{
          if(item.checked===true){
            return true;
          }
        })
      },
  • 相关阅读:
    【NET CORE微服务一条龙应用】第一章 网关使用与配置
    111
    test
    再来一个测试
    测试博客
    flutter 中的json解析
    关于flutter -app开发过程中的问题及解决方式总结
    使用Mybatis-plus通过自定义Sql查询只有主键为null的问题
    Centos 6中keepalived作为服务启动
    CentOS6 开放、关闭防火墙相关端口命令
  • 原文地址:https://www.cnblogs.com/lvlisn/p/14759977.html
Copyright © 2011-2022 走看看