微信小程序復(fù)選框?qū)崿F(xiàn)多選一功能過(guò)程解析
這篇文章主要介紹了微信小程序復(fù)選框?qū)崿F(xiàn)多選一功能過(guò)程解析,文中通過(guò)示例代碼介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友可以參考下
功能實(shí)現(xiàn)界面

data: {
checkboxItems: [
{ name: '全天(1-8節(jié))', value: 'allday' },
{ name: '上午(1-4節(jié))', value: 'am' },
{ name: '下午(5-8節(jié))', value: 'pm' },
{ name: '晚上(晚自習(xí))', value: 'night' },
]
}
想要實(shí)現(xiàn)的功能
四個(gè)復(fù)選框中只能選一個(gè),且選中另一個(gè)會(huì)取消其余選中,且能保存選擇的value值
JS代碼實(shí)現(xiàn)
checkboxChange: function (e) {
var that = this;
let checkboxValues=null;
let checkboxItems = this.data.checkboxItems, values = e.detail.value
for (var i = 0, lenI = checkboxItems.length; i < lenI; ++i) {
if(checkboxItems[i].value==values[values.length-1]){
checkboxItems[i].checked=true;
checkboxValues = checkboxItems[i].value;
}
else{
checkboxItems[i].checked = false;
}
}
console.log(checkboxValues)
that.setData({ checkboxItems, checkboxValues })
}
前端代碼
<view class="weui-cells weui-cells_after-title">
<checkbox-group class="weui-flex" bindchange="checkboxChange">
<label class="weui-cell weui-check__label weui-flex__item" wx:for="{{checkboxItems}}" wx:key="value">
<checkbox class="weui-check" value="{{item.value}}" checked="{{item.checked}}" />
<view class="weui-cell__hd weui-check__hd_in-checkbox">
<icon class="weui-icon-checkbox_circle" type="circle" size="23" wx:if="{{!item.checked}}"></icon>
<icon class="weui-icon-checkbox_success" type="success" size="23" wx:if="{{item.checked}}"></icon>
</view>
<view class="weui-cell__bd">{{item.name}}</view>
</label>
</checkbox-group>
</view>
對(duì)應(yīng)的CSS樣式是
以上就是本文的全部?jī)?nèi)容,希望對(duì)大家的學(xué)習(xí)有所幫助,也希望大家多多支持腳本之家。
- 微信小程序?qū)崿F(xiàn)多選框全選操作
- 微信小程序?qū)崿F(xiàn)多選框功能的實(shí)例代碼
- 微信小程序全選多選效果實(shí)現(xiàn)代碼解析
- 微信小程序?qū)崿F(xiàn)多選框全選與反全選及購(gòu)物車(chē)中刪除選中的商品功能
- 微信小程序?qū)崿F(xiàn)多選框全選與取消全選功能示例
- 微信小程序單選radio及多選checkbox按鈕用法示例
- 微信小程序?qū)崿F(xiàn)多選刪除列表數(shù)據(jù)功能示例
- 微信小程序?qū)崿F(xiàn)多選功能
- 微信小程序自定義多選事件的實(shí)現(xiàn)代碼
- 微信小程序自定義組件實(shí)現(xiàn)多選功能
相關(guān)文章
selenium 反爬蟲(chóng)之跳過(guò)淘寶滑塊驗(yàn)證功能的實(shí)現(xiàn)代碼
這篇文章主要介紹了selenium 反爬蟲(chóng)之跳過(guò)淘寶滑塊驗(yàn)證功能,本文給大家介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值,需要的朋友可以參考下2020-08-08
兼容低版本IE的JScript5.5實(shí)現(xiàn)
兼容低版本IE的JScript5.5實(shí)現(xiàn)...2006-09-09
js模式化窗口問(wèn)題![window.dialogArguments]
這篇文章主要介紹了js模式化窗口問(wèn)題![window.dialogArguments],需要的朋友可以參考下2016-10-10
Typescript中bind的使用方法及注意事項(xiàng)
在TypeScript(以及JavaScript)中,bind()是一個(gè)用于改變函數(shù)上下文的方法,下面這篇文章主要給大家介紹了關(guān)于Typescript中bind的使用方法及注意事項(xiàng)的相關(guān)資料,需要的朋友可以參考下2024-08-08
Javascript 網(wǎng)頁(yè)水印(非圖片水印)實(shí)現(xiàn)代碼
在一些B/S結(jié)構(gòu)的應(yīng)用系統(tǒng)中,有很多頁(yè)面是需要有水印的。常見(jiàn)的就是公文系統(tǒng)、合同系統(tǒng)等。2010-03-03
微信小程序?qū)崿F(xiàn)動(dòng)態(tài)設(shè)置頁(yè)面標(biāo)題的方法【附源碼下載】
這篇文章主要介紹了微信小程序?qū)崿F(xiàn)動(dòng)態(tài)設(shè)置頁(yè)面標(biāo)題的方法,涉及微信小程序button組件事件綁定及頁(yè)面元素屬性動(dòng)態(tài)設(shè)置相關(guān)實(shí)現(xiàn)技巧,并附帶完整源碼供讀者下載參考,需要的朋友可以參考下2017-11-11
深入理解JavaScript的事件執(zhí)行機(jī)制
本文主要介紹了JavaScript的事件執(zhí)行機(jī)制,文中通過(guò)示例代碼介紹的非常詳細(xì),具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2021-09-09

