js实现单选全选功能

实现效果如图：

源代码

代码语言：javascript复制

 <view class="padding32">
  <template v-if="dataList2.length">
     <!-- 循环单选 -->
     <view
       class="parkNotice-email"
       v-for="(item2, index2) in dataList2"
       :key="index2"
       @click="checkChange(index2)"
     >
       <image
         :src="
           item2.checked
             ? localImg.park.uncheckedIcon
             : localImg.park.checkIcon
         "
         :checked="item2.checked"
       ></image>
       <span class="title">
         {{ item2.title }}
       </span>
     </view>
     <!-- 全选 -->
     <view class="selected">
       <span class="image">
         <view @click="allSelected(index)">
           <image
             :src="
               allChecked
                 ? localImg.park.uncheckedIcon
                 : localImg.park.checkIcon
             "
             :checked="allChecked"
           ></image>
         </view>
       </span>
       <view class="title">全选</view>
     </view>
     <view class="email">发送到邮箱</view>
   </template>

   <template v-else>没有数据哦</template>
 </view>

代码语言：javascript复制

 dataList2: [
    {
       checked: "false",
       title: "园区装修必须要填写的申请单.docx",
     },
     {
       checked: "false",
       title: "园区装修必须要填写的申请单.docx",
     },
 ]

代码语言：javascript复制

 //单选
    checkChange(index) {
      this.dataList2[index].checked = !this.dataList2[index].checked;
    },
    //全选
    allSelected() {
      this.allChecked = !this.allChecked;
      if (this.allChecked == true) {
        for (var i = 0; i < this.dataList2.length; i  ) {
          this.dataList2[i].checked = true;
        }
      } else {
        for (var i = 0; i < this.dataList2.length; i  ) {
          this.dataList2[i].checked = false;
        }
      }
    },

class image title view 数据

0 人点赞