小程式核取方塊全選和全部取消
小程式全選和全部取消
1.在wxml中先新增核取方塊和點選事件
<checkbox class="q" bindtap="checkq" checked="{{isAll}}">全選</checkbox>
<text bindtap-="tz">跳轉下一頁</text>
<text>總數:{{sum}}</text>
</view>
<view class="box1" wx:for="{{list}}" bindtap="chlik" data-number="{{index}}">
<checkbox checked="{{item.isCheck}}"></checkbox>
<image src="{{item.img}}"></image>
<view wx:if="{{item.num <= 0}}"></view>
<view class="tb" wx:elif="{{item.num > 99}}">99+</view>
<view class="tb" wx:else>{{item.num}}</view>
<view class="box2">
<view class="box3">
<view class="mz">{{item.title}}</view>
<view class="box4">{{item.time}}</view>
</view>
<view class="xx">{{item.content}}</view>
</view>
</view>
2.在js中新增資料
onPullDownRefresh: function () {
var list=[];
var li={};
for(var i=0;i< 10;i++){
li={
id:i+1,
img: "../../img/sw.jpg",
title: "標題"+(i+1),
content: "內容"+(i+1),
num: (i+1),
time: "9:00",
isCheck:false
}
list.push(li[i])
}
this.setData({
list:list
})
}
3.實現全選的點選事件,首先要定義一個全域性變數isAll=false,讓核取方塊預設為不勾選狀態
var isAll=false
Page({
checkq:function(){
var list=this.data.list;
console.log(list);
isAll=!isAll;
if(isAll){
for(var i=0;i<list.length;i++){
var item=list[i];
item.isCheck=true
list.splice(i,1,item)
}
}else{
for(var i=0;i<list.length;i++){
var item=list[i];
item.isCheck=false
list.splice(i,1,item)
}
}
this.setData({
list:list
})
},
}
4.實現點選每一項前面的核取方塊,全部點選的話全選字樣的核取方塊也勾選,如有一項沒有勾選則全選字樣的核取方塊不勾選
chlik:function(e){
var index=e.currentTarget.dataset.number;
var list=this.data.list;
var item=list[index];
item.isCheck=!item.isCheck;
list.splice(index,1,item)
this.setData({
list:list
})
var qb=0
var sum=0
for(var i=0;i<list.length;i++){
if(list[i].isCheck){
qb++
sum+=list[i].num
}
}
if(qb===list.length){
isAll=true
}else{
isAll=false
}
this.setData({
isAll:isAll,
sum:sum
})
},
相關文章
- js核取方塊全選和取消全選效果JS
- JavaScript 核取方塊全選和取消全選效果JavaScript
- checkbox核取方塊全選和取消全選例項程式碼
- javascript checkbox核取方塊全選和取消全選效果JavaScript
- javascript實現核取方塊全選和取消程式碼分析JavaScript
- 如何使用jQuery實現核取方塊的全選和取消jQuery
- 使用jQuery做核取方塊的全選與取消jQuery
- JavaScript 核取方塊全選和全不選JavaScript
- 核取方塊全選和全不選程式碼例項
- jQuery核取方塊全選和全不選效果程式碼jQuery
- jQuery核取方塊全選和全不選效果jQuery
- javascript核取方塊全選和反選效果JavaScript
- checkbox 核取方塊全選程式碼
- JavaScript核取方塊全選和全不選詳解JavaScript
- jQuery核取方塊checkbox的全選和反選jQuery
- jQuery如何實現核取方塊全選和全不選jQuery
- jquery table下的核取方塊選中、取消jQuery
- 選中和取消選中核取方塊實現背景變色和取消變色
- JS實現核取方塊全選反選JS
- jquerycheckbox核取方塊多次點選判斷選中狀態,以及全選/取消的程式碼示例jQuery
- javascript實現checkbox核取方塊全選和反選功能JavaScript
- 單選按鈕和核取方塊
- JS如何實現對name是陣列的核取方塊的全選和反選以及取消選擇JS陣列
- 原生js實現的核取方塊的全選和全不選效果JS
- jquery實現checkbox核取方塊全選效果jQuery
- js如何實現點選li選中和取消裡面的核取方塊JS
- 判斷核取方塊和單選按鈕程式碼
- 實現購物車 全選全不選,反選,單選-選滿時同步全選核取方塊--核取方塊checked屬性取值問題已解決
- 純CSS模擬單選框和核取方塊CSS
- 基礎元件:單選開關和核取方塊元件
- JavaScript 限制核取方塊選中數目JavaScript
- jQuery獲取選中核取方塊的值程式碼例項jQuery
- css點選附近文字選中核取方塊程式碼例項CSS
- jQuery第二次無法全選checkbox核取方塊jQuery
- JavaScript獲取選中checkbox核取方塊值JavaScript
- js 獲取被選中核取方塊的值JS
- JavaScript獲取選中checkbox核取方塊的選中值JavaScript
- 直播系統原始碼,單選按鈕和核取方塊原始碼