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

微信小程序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;i<order.length;i++){ //将所有checkbox赋值为false
  order[i].checked=false
  }
  for(var i=0;i<values.length;i++){
  var value=values[i]-1 //我的传的值从1开始所以-1
  for(var j=0;j<order.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 block
var foo = 'bar';

生成一个适合你的列表

• 项目
  • 项目
    • 项目

1. 项目1
2. 项目2
3. 项目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

创建一个自定义列表

Markdown

Text-to- HTML conversion tool

Authors

John

Luke

如何创建一个注脚

一个具有注脚的文本。¹

注释也是必不可少的

Markdown将文本转换为 HTML。

KaTeX数学公式

您可以使用渲染LaTeX数学表达式 KaTeX:

Gamma公式展示 $\Gamma(n) = (n-1)!\quad\forall n\in\mathbb N$ 是通过欧拉积分

$\Gamma(z) = \int_0^\infty t^{z-1}e^{-t}dt\,.$

你可以找到更多关于的信息 LaTeX 数学表达式here.

新的甘特图功能，丰富你的文章

• 关于 甘特图 语法，参考 这儿,

UML 图表

可以使用UML图表进行渲染。 Mermaid. 例如下面产生的一个序列图：:

这将产生一个流程图。:

• 关于 Mermaid 语法，参考 这儿,

FLowchart流程图

我们依旧会支持flowchart的流程图：

• 关于 Flowchart流程图 语法，参考 这儿.

导出与导入

导出

如果你想尝试使用此编辑器, 你可以在此篇文章任意编辑。当你完成了一篇文章的写作, 在上方工具栏找到 文章导出 ，生成一个.md文件或者.html文件进行本地保存。

导入

如果你想加载一篇你写过的.md文件或者.html文件，在上方工具栏可以选择导入功能进行对应扩展名的文件导入，
继续你的创作。

---

1. 注脚的解释 ↩︎