checkbox怎么在微信小程序中使用

checkbox怎么在微信小程序中使用？针对这个问题，这篇文章详细介绍了相对应的分析和解答，希望可以帮助更多想解决这个问题的小伙伴找到更简单易行的方法。

type_add.js

//pages/detail_add/detail_add.js
Page({

/**
*页面的初始数据
*/
data:{
selectData:"",//下拉列表的数据
height:20,
focus:false
},
checkboxChange:function(e){
console.log('checkbox发生change事件，携带value值为：',e.detail.value)
console.log("长度:"+e.detail.value.length);
this.setData({
typeId:e.detail.value,
length:e.detail.value.length
})


},
formSubmit:function(e){
console.log('form发生了submit事件，携带数据为：'+e.detail.value.amount+","+e.detail.value.typeId+","+this.data.remark+","+this.data.date+","+this.data.time);

varamount=e.detail.value.amount;
vartypeId=this.data.typeId;

vardate=this.data.date;
vartime=this.data.time;
varremark=e.detail.value.remark;
varcreateDate=date+""+time;
varlength=this.data.length;
console.log("length:"+length);
console.log("date:"+date);
console.log("time:"+time);
console.log("createDate:"+createDate)

if(amount==null||amount==""){
wx.showToast({
title:"支出金额不能为空",
icon:'none',
duration:1500
})
}elseif(typeId==null||typeId==""){
wx.showToast({
title:"支出类型不能为空",
icon:'none',
duration:1500
})

}elseif(length>=2){
wx.showToast({
title:"支出类型只能选择一种",
icon:'none',
duration:1500
})
}elseif(date==null||date==""){
wx.showToast({
title:"日期不能为空",
icon:'none',
duration:1500
})
}elseif(time==null||time==""){
wx.showToast({
title:"时间不能为空",
icon:'none',
duration:1500
})
}elseif(remark==null||remark==""){
wx.showToast({
title:"备注不能为空",
icon:'none',
duration:1500
})
}else{



wx.request({

url:getApp().globalData.urlPath+"spendingDetail/add",
method:"POST",
data:{
amount:amount,
typeId:typeId,
createDate:createDate,
remark:remark
},
header:{
"Content-Type":"application/x-www-form-urlencoded"
},
success:function(res){
console.log(res.data.code);
if(res.statusCode==200){

//访问正常
if(res.data.code=="000000"){
wx.showToast({
title:"添加支出详情成功",
icon:'success',
duration:3000,
success:function(){

wx.navigateTo({
url:'../detail/detail'
})
}
})

}
}else{

wx.showLoading({
title:'系统异常',
fail
})

setTimeout(function(){
wx.hideLoading()
},2000)
}

}
})
}


},
formReset:function(){
console.log('form发生了reset事件')
},
bindDateChange:function(e){
console.log('picker发送选择改变，携带值为',e.detail.value)
this.setData({
date:e.detail.value
})
},
bindTimeChange:function(e){
console.log('picker发送选择改变，携带值为',e.detail.value)
this.setData({
time:e.detail.value
})
},
/**
*生命周期函数--监听页面加载
*/
onLoad:function(options){
wx.setNavigationBarTitle({

title:"添加支出详情"

})


varuserCode=wx.getStorageSync('userId').toString();
varself=this;
wx.request({
url:getApp().globalData.urlPath+"spendingType/types",//json数据地址
data:{
userCode:userCode
},
headers:{
"Content-Type":"application/x-www-form-urlencoded"
},
success:function(res){
console.log("res.data.data.typeName:"+res.data.data)

self.setData({

selectData:res.data.data

})


}
})
},

/**
*生命周期函数--监听页面初次渲染完成
*/
onReady:function(){

},

/**
*生命周期函数--监听页面显示
*/
onShow:function(){

},

/**
*生命周期函数--监听页面隐藏
*/
onHide:function(){

},

/**
*生命周期函数--监听页面卸载
*/
onUnload:function(){

},

/**
*页面相关事件处理函数--监听用户下拉动作
*/
onPullDownRefresh:function(){

},

/**
*页面上拉触底事件的处理函数
*/
onReachBottom:function(){

},

/**
*用户点击右上角分享
*/
onShareAppMessage:function(){

}
})

type_add.wxml:

<formbindsubmit="formSubmit"bindreset="formReset">
<viewclass="section">
<text>支出金额</text>
<inputname="input"name="amount"placeholder="请输入支出金额"/>
</view>

<viewclass="section">
<text>支出类型</text>
<checkbox-groupbindchange="checkboxChange">
<labelclass="checkbox"wx:for="{{selectData}}">
<checkboxvalue="{{item.typeId}}"checked="{{item.checked}}"/>{{item.typeName}}
</label>
</checkbox-group>

</view>

<view>
<text>创建时间</text>
<viewclass="section">
<pickermode="date"value="{{date}}"start="2018-09-01"end="2030-09-01"bindchange="bindDateChange">
<viewclass="picker">
选择日期:{{date}}
</view>
</picker>
</view>
<viewclass="section">
<pickermode="time"value="{{time}}"start="00:00="end="23:59"bindchange="bindTimeChange">
<viewclass="picker">
选择时间:{{time}}
</view>
</picker>
</view>
</view>
<viewclass="section">
<text>备注</text>
<inputname="input"name="remark"placeholder="请输入备注"/>
</view>
<view>
<text>\n</text>
</view>
<viewclass="btn-area">
<buttonform-type="submit">提交</button>
<view>
<text>\n</text>
</view>
<buttonform-type="reset">重置</button>
</view>
</form>

bindchange=”checkboxChange” 相当于js中的onchange事件。

上述中的form表单基本就是参考官方文档改的。

有一段代码还是要提一下:

self.setData({
selectData:res.data.data
})

self其实相当于this，意为当前。每次触发事件，对应的值都会进行存储，用于与后台通信进行数组传递，

type_add.wxss:

/*pages/login/login.wxss*/
form{
width:310px;
height:240px;
line-height:40px;
/*border:1pxsolidred;*/
}
input{
border:1pxsolid#ccc;
width:310px;
height:40px;
}
.button{
margin-top:20px;
}
.headertext{
font-size:25px;
color:#666;
}
formtext{
font-size:20px;
color:#666;
}

关于checkbox怎么在微信小程序中使用问题的解答就分享到这里了，希望以上内容可以对大家有一定的帮助，如果你还有很多疑惑没有解开，可以关注恰卡编程网行业资讯频道了解更多相关知识。