这篇文章主要介绍了微信小程序复选框实现多选一功能过程解析,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下
功能实现界面
数据:{
checkboxItems:(
{名称:“全天(1 - 8节),价值:“整天”},
{名称:“上午(1 - 4节),价值:“我”},
{名称:“下午(5 - 8节),价值:“点”},
{名称:“晚上(晚自习)”,价值:“晚上”},
]
}
想要实现的功能
四个复选框中只能选一个,且选中另一个会取消其余选中,且能保存选择的价值值
JS代码实现
checkboxChange:函数(e) {
var=这个;
让checkboxValues=零;
让checkboxItems=this.data。=e.detail.value checkboxItems,值
(var=0,雷尼·=checkboxItems.length;我& lt;莱妮?;+ + i) {
如果(checkboxItems[我]value=https://www.yisu.com/zixun/=values [values.length-1]) {
checkboxItems[我]支票=true;
checkboxValues=checkboxItems[我]value;
}
其他{
checkboxItems[我]。检查=false;
}
}
console.log (checkboxValues)
那setData ({checkboxItems, checkboxValues})
}
前端代码
& lt;视图类=" weui-cells weui-cells_after-title”比;
& lt;复选框组类=" weui-flex " bindchange=癱heckboxChange”比;
& lt;标签类=" weui-cell weui-check__label weui-flex__item”天气:为=" {{checkboxItems}} "天气:关键=凹壑怠北?
& lt;复选框类=" weui-check " value=" https://www.yisu.com/zixun/{{item.value}}”检查="{{项目。检查}}"/比;
& lt;视图类=" weui-cell__hd weui-check__hd_in-checkbox”比;
& lt;图标类大?皐eui-icon-checkbox_circle”类型=霸病??3”天气:如果=" {{! item.checked}} "祝辞& lt;/icon>
& lt;图标类大?皐eui-icon-checkbox_success”类型=俺晒Α??3”天气:如果=" {{item.checked}} "祝辞& lt;/icon>
& lt;/view>
& lt;视图类=" weui-cell__bd "在{{item.name}} & lt;/view>
& lt;/label>
& lt;/checkbox-group>
& lt;/view>
对应的CSS样式是
WeUI
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持。
