微信小程序checkbox的全选以及所有checkbox选中之后的全选-即速应用

微信小程序checkbox的全选以及所有checkbox选中之后的全选

第一次写，软件都不懂，直接把代码拷过来了

模板

小程序

WXML

订单编号：{{item.orderiD}}
{{item.orderAddress}}
{{item.orderName}}

￥{{item.orderPrice}}

全选以选：0笔，需支付{{priceSum}}元结算

WXSS

.viewtext{
text-align: center;
}
.checkboxbg{
background: #ffffff;
width: 750rpx;
border-bottom: 4rpx solid #f4f5f7;
}
.label{
margin-left: 20rpx;
width: 100%;
border-bottom: 3rpx solid #f4f5f7;
display: flex;

}
.checkbox{
align-self: center
}
.view1{
display: flex;
margin: 10rpx;
width: 660rpx;
align-items: center
}
.view1-01{
width: 80%;
}
.veiw1-01-1{
font-size: 15px;
font-weight: bold;
}
.veiw1-01-2{
font-size: 14px;

}
.veiw1-01-3{
font-size: 13px;
color: #696969;
}
.view1-02{
text-align: center;
width:20%;
align-items: center;
color: #f2b42e;
}
.view2{
display: flex;
line-height: 100rpx;
height: 100rpx;
background: #ffffff;
font-size: 15px
}
.view2-01{
flex: 1;
margin-left: 20rpx;
}
.view2-02{
flex: 3;
padding-top: 4rpx
}
.view2-03{
flex: 1;
text-align: center;
background: #f2b42e;
padding-top: 4rpx
}
/*checkbox 选项框大小 */
checkbox .wx-checkbox-input {
width: 40rpx;
height: 40rpx;
border: 1rpx solid #f2b42e;
}
/*checkbox选中后样式 */
checkbox .wx-checkbox-input.wx-checkbox-input-checked {
background: #f2b42e;
}
/*checkbox选中后图标样式 */
checkbox .wx-checkbox-input.wx-checkbox-input-checked::before {
width: 28rpx;
height: 28rpx;
line-height: 28rpx;
text-align: center;
font-size: 22rpx;
color: #fff;
background: transparent;
transform: translate(-50%, -50%) scale(1);
-webkit-transform: translate(-50%, -50%) scale(1);
}

##JS

data: {
settleAccounts:0,
select_all: false,
priceSum :0.0,
order:[
{
id:‘1’,
orderiD: ‘18120313305775’,
orderAddress:‘浙江湖州-黑龙江鹤岗’,
orderName:‘Youth (侠) 晋M-88888 草坪’,
orderPrice: 1.0,
checked:false
},
{
id: ‘2’,
orderiD: ‘18120313305776’,
orderAddress: ‘浙江湖州-黑龙江鹤岗’,
orderName: ‘Youth (侠) 晋M-88888 草坪’,
orderPrice: 2.0,
checked: false
},
{
id: ‘3’,
orderiD: ‘18120313305776’,
orderAddress: ‘浙江湖州-黑龙江鹤岗’,
orderName: ‘Youth (侠) 晋M-88888 草坪’,
orderPrice: 3.0,
checked: false
}
]
},

/**

生命周期函数–监听页面加载
*/
onLoad: function (options) {
this.settleAccountsHeight()
},
//整个页面的高度
settleAccountsHeight(){
this.setData({
settleAccountsHeight: wx.getSystemInfoSync().windowHeight
})
},
chang(e){
var that=this
var sum=0
var values=e.detail.value
var order = this.data.order
for(var i=0;iorder.length;i++){ //将所有checkbox赋值为false
order[i].checked=false
}
for(var i=0;ivalues.length;i++){
var value=values[i]-1 //我的传的值从1开始所以-1
for(var j=0;jorder.length;j++){
if (valuej){
order[value].checked =true //将选中的赋值为true
sum=sum+order[value].orderPrice
}
if(order.lengthvalues.length){ //全部选中将全选改为true
that.setData({
select_all : true
})
}else{
that.setData({
select_all: false
})
}
}
this.setData({
order :order,
priceSum:sum
})
}
},
bindSelectAll(e){
console.log(e)
var that = this;
var sum=0
var order=this.data.order
for (var i = 0; i order.length;i++){
order[i].checked = (!that.data.select_all)
sum+=order[i].orderPrice
}
if (that.data.select_all==true){
sum=0
}
this.setData({
order: order,
select_all: (!that.data.select_all),
priceSum:sum
})
},

插入链接与图片

链接: link.

图片:

带尺寸的图片:

居中的图片:

居中并且带尺寸的图片:

当然，我们为了让用户更加便捷，我们增加了图片拖拽功能。

如何插入一段漂亮的代码片

去博客设置页面，选择一款你喜欢的代码片高亮样式，下面展示同样高亮的 代码片.

// An highlighted blockvar foo = 'bar';

生成一个适合你的列表

项目
- 项目
  - 项目

项目1
项目2
项目3

计划任务
完成任务

创建一个表格

一个简单的表格是这么创建的：

项目	Value
电脑	$1600
手机	$12
导管	$1

设定内容居中、居左、居右

使用:---------:居中
使用:----------居左
使用----------:居右

第一列	第二列	第三列
第一列文本居中	第二列文本居右	第三列文本居左

SmartyPants

SmartyPants将ASCII标点字符转换为“智能”印刷标点HTML实体。例如：

TYPE	ASCII	HTML
Single backticks	`'Isn't this fun?'`	‘Isn’t this fun?’
Quotes	`"Isn't this fun?"`	“Isn’t this fun?”
Dashes	`-- is en-dash, --- is em-dash`	– is en-dash, — is em-dash