js实现单选全选功能

最新推荐文章于 2022-03-17 21:45:24 发布

程序媛夏天

最新推荐文章于 2022-03-17 21:45:24 发布

阅读量1.3k

点赞数

分类专栏：微信小程序 JavaScript进阶文章标签： javascript 单选全选功能前端js实现单选全选

本文链接：https://blog.csdn.net/weixin_45822171/article/details/121335392

版权

JavaScript进阶同时被 2 个专栏收录

63 篇文章 39 订阅

订阅专栏

微信小程序

24 篇文章 2 订阅

订阅专栏

实现效果如图：
在这里插入图片描述
源代码

 <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>

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

 //单选
    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;
        }
      }
    },