功能实现界面
data: {
checkBoxItems: [
{ name: @H_403_10@'全天(1-8节)',value: 'allday' },{ name: @H_403_10@'上午(1-4节)',value: 'am'403_10@'下午(5-8节)',value: 'pm'403_10@'晚上(晚自习)',value: 'night'403_10@
想要实现的功能
四个复选框中只能选一个,且选中另一个会取消其余选中,且能保存选择的value值
JS代码实现
checkBoxChange: function@H_403_10@ (e) { @H_403_10@var@H_403_10@ that = this@H_403_10@; let checkBoxValues@H_403_10@=null@H_403_10@; let checkBoxItems @H_403_10@= this@H_403_10@.data.checkBoxItems,values = e.detail.value @H_403_10@for@H_403_10@ (var@H_403_10@ i = 0,lenI = checkBoxItems.length; i < lenI; ++i) { @H_403_10@if@H_403_10@(checkBoxItems[i].value==values[values.length-1]){ checkBoxItems[i].checked@H_403_10@=true@H_403_10@; checkBoxValues @H_403_10@= checkBoxItems[i].value; } @H_403_10@else@H_403_10@{ checkBoxItems[i].checked @H_403_10@= false@H_403_10@; } } console.log(checkBoxValues) that.setData({ checkBoxItems,checkBoxValues }) }@H_403_10@
前端代码
<@H_403_10@view @H_403_10@@H_502_98@class@H_403_10@="weui-cells weui-cells_after-title"@H_403_10@>@H_403_10@
checkBox-group @H_403_10@@H_502_98@="weui-flex"@H_403_10@@H_502_98@ bindchange@H_403_10@="checkBoxChange"@H_403_10@>@H_403_10@
label @H_403_10@@H_502_98@="weui-cell weui-check__label weui-flex__item"@H_403_10@@H_502_98@ wx:for@H_403_10@="{{checkBoxItems}}"@H_403_10@@H_502_98@ wx:key@H_403_10@="value"@H_403_10@>@H_403_10@
checkBox @H_403_10@@H_502_98@="weui-check"@H_403_10@@H_502_98@ value@H_403_10@="{{item.value}}"@H_403_10@@H_502_98@ checked@H_403_10@="{{item.checked}}"@H_403_10@ />@H_403_10@
="weui-cell__hd weui-check__hd_in-checkBox"@H_403_10@>@H_403_10@
icon @H_403_10@@H_502_98@="weui-icon-checkBox_circle"@H_403_10@@H_502_98@ type@H_403_10@="circle"@H_403_10@@H_502_98@ size@H_403_10@="23"@H_403_10@@H_502_98@ wx:if@H_403_10@="{{!item.checked}}"@H_403_10@></@H_403_10@icon@H_403_10@="weui-icon-checkBox_success"@H_403_10@@H_502_98@="success"@H_403_10@@H_502_98@="{{item.checked}}"@H_403_10@</@H_403_10@view@H_403_10@="weui-cell__bd"@H_403_10@>@H_403_10@{{item.name}}label@H_403_10@checkBox-group@H_403_10@>@H_403_10@
>@H_403_10@
对应的CSS样式是
WeUI