微信小程序实现点击一个复选框选中多个，取消一个复选框取消多个！

最新推荐文章于 2024-10-16 13:31:03 发布

妄也

最新推荐文章于 2024-10-16 13:31:03 发布

阅读量5.2k

点赞数

分类专栏：微信小程序文章标签：微信小程序复选框类dom操作

本文链接：https://blog.csdn.net/qq_42864665/article/details/83650310

版权

本文记录了在微信小程序中实现点击一个复选框选中或取消多个复选框的效果，探讨了类DOM操作方法，并分享了一段相关代码。在实现过程中，作者指出当前方案效率较低，欢迎读者提出优化建议。

摘要由CSDN通过智能技术生成

今天研究了一下微信小程序，同事有一个问题，希望实现点击一个复选选中多个复选的，取消一个复选取消多个复选大复选不影响单个复选，在这里记录一下，因为写的是暂时实现，效率特别低，如果大家有什么好的想法欢迎留言！

wxml：

  <form bindsubmit="formSubmit" bindreset="formReset">  <view>
     <view>checkbox</view>
     <checkbox-group name="city" bindchange="shengChange">    <view wx:for="{
  {sheng}}"> 
          <label><checkbox  value="{
  {item.areaprovincecode}}"/>{
  {item.areaprovince}}</label>
            <view wx:for="{
  {item.areaCityList}}">
                <label><checkbox checked='{
  {item.checked}}' value="{
  {item.areaprovincecode}}"/>{
  {item.areaprovince}}</label>
            </view>
     </view>
     </checkbox-group>   </view>   <view>
     <button formType="submit">Submit</button>
     <button formType="reset">Reset</button>   </view> </form>

js：

首先有一个顶级变量
 //用来存储选中的省的值
 var checkedId=[];

shengChange :function(e){
    //总地区
     var list=this.data.sheng;
    
    //当前选中的所有复选框值
     var pagelist = e.detail.value;
    
     for (var a = 0; a < list.length;a++){
      //先是新增复选  当前选择循环>已选择省份循环
       for (var b = 0; b < pagelist.length;b++){
         if (list[a].areaprovincecode == pagelist[b]){
           if (checkedId.length==0){
             checkedId.push(pagelist[b]);
             for (var h = 0; h < list[a].areaCityList.length; h++) {
               this.setData({
                 ["sheng[" + a + "].checked"]: true,
                 ["sheng[" + a + "].areaCityList[" + h + "].checked"]: true
               })
             }
           }else{
             var xz=true;
             for (var z = 0; z < checkedId.length;z++){
               if (pagelist[b] == checkedId[z]){
                  xz=false;
               }
             }
             if (xz){
               checkedId.push(pagelist[b]);
               
               for (var h = 0; h < list[a].areaCityList.length; h++) {
               this.setData({
                 ["sheng[" + a + "].checked"]: true,
                 ["sheng[" + a + "].areaCityList[" + h + "].checked"]: true
               })
               }
             }
           }
         }
       }
     
      //后是删除省复选  已选择省份循环>当前选择省份循环
       for (var c = 0; c < checkedI