微信小程序?qū)崿F(xiàn)單選、多選及如何通過(guò)變量控制單選/多選功能
更新時(shí)間：2025年01月20日 17:11:51 作者：25號(hào)底片~
文章介紹了如何在微信小程序中實(shí)現(xiàn)單選和多選功能,單選功能使用`radio`和`radio-group`組件,多選功能使用`checkbox`和`checkbox-group`組件,同時(shí),還介紹了如何通過(guò)自定義邏輯實(shí)現(xiàn)單選和多選功能,并總結(jié)了每種功能的特點(diǎn)和實(shí)現(xiàn)方式
一、實(shí)現(xiàn)單選功能
微信小程序提供了 radio 組件來(lái)實(shí)現(xiàn)單選功能。radio 組件需要配合 radio-group 使用。
1. WXML 代碼
<radio-group bindchange="onRadioChange">
<label wx:for="{{items}}" wx:key="id">
<radio value="{{item.value}}" checked="{{item.checked}}" /> {{item.name}}
</label>
</radio-group>2. JS 代碼
Page({
data: {
items: [
{ id: 1, name: '選項(xiàng)A', value: 'A', checked: false },
{ id: 2, name: '選項(xiàng)B', value: 'B', checked: false },
{ id: 3, name: '選項(xiàng)C', value: 'C', checked: false }
]
},
// 單選按鈕變化事件
onRadioChange(e) {
const value = e.detail.value; // 獲取選中的值
const items = this.data.items.map(item => {
item.checked = item.value === value; // 更新選中狀態(tài)
return item;
});
this.setData({ items });
console.log('選中的值:', value);
}
});3. 實(shí)現(xiàn)效果
- 用戶(hù)只能選擇一個(gè)選項(xiàng)。
- 選中的值會(huì)通過(guò)
onRadioChange事件返回。
二、實(shí)現(xiàn)多選功能
微信小程序提供了 checkbox 組件來(lái)實(shí)現(xiàn)多選功能。checkbox 組件需要配合 checkbox-group 使用。
1. WXML 代碼
<checkbox-group bindchange="onCheckboxChange">
<label wx:for="{{items}}" wx:key="id">
<checkbox value="{{item.value}}" checked="{{item.checked}}" /> {{item.name}}
</label>
</checkbox-group>2. JS 代碼
javascript
Page({
data: {
items: [
{ id: 1, name: '選項(xiàng)A', value: 'A', checked: false },
{ id: 2, name: '選項(xiàng)B', value: 'B', checked: false },
{ id: 3, name: '選項(xiàng)C', value: 'C', checked: false }
]
},
// 多選按鈕變化事件
onCheckboxChange(e) {
const values = e.detail.value; // 獲取選中的值數(shù)組
const items = this.data.items.map(item => {
item.checked = values.includes(item.value); // 更新選中狀態(tài)
return item;
});
this.setData({ items });
console.log('選中的值:', values);
}
});3. 實(shí)現(xiàn)效果
- 用戶(hù)可以選擇多個(gè)選項(xiàng)。
- 選中的值會(huì)通過(guò)
onCheckboxChange事件返回一個(gè)數(shù)組。
三、自定義單選和多選
如果你不想使用 radio 或 checkbox 組件，可以通過(guò)自定義邏輯實(shí)現(xiàn)單選和多選功能。
1. WXML 代碼
<view class="container">
<view wx:for="{{items}}" wx:key="id" class="item {{item.checked ? 'active' : ''}}" bindtap="onItemTap" data-index="{{index}}">
{{item.name}}
</view>
</view>2. JS 代碼
javascript
Page({
data: {
items: [
{ id: 1, name: '選項(xiàng)A', value: 'A', checked: false },
{ id: 2, name: '選項(xiàng)B', value: 'B', checked: false },
{ id: 3, name: '選項(xiàng)C', value: 'C', checked: false }
],
isMultiple: false // 是否多選
},
// 點(diǎn)擊選項(xiàng)事件
onItemTap(e) {
const index = e.currentTarget.dataset.index; // 獲取點(diǎn)擊的索引
const items = this.data.items;
if (this.data.isMultiple) {
// 多選邏輯
items[index].checked = !items[index].checked;
} else {
// 單選邏輯
items.forEach((item, i) => {
item.checked = i === index;
});
}
this.setData({ items });
console.log('當(dāng)前選中的值:', items.filter(item => item.checked).map(item => item.value));
}
});3. WXSS 代碼
.container {
padding: 20px;
}
.item {
padding: 10px;
margin-bottom: 10px;
border: 1px solid #ccc;
text-align: center;
}
.active {
background-color: #07c160;
color: white;
}4. 實(shí)現(xiàn)效果
單選
多選
- 點(diǎn)擊選項(xiàng)時(shí)，根據(jù)
isMultiple的值決定是單選還是多選。 - 選中的選項(xiàng)會(huì)高亮顯示。
四、總結(jié)
| 功能 | 使用組件 | 特點(diǎn) |
|---|---|---|
| 單選 | radio + radio-group | 只能選擇一個(gè)選項(xiàng) |
| 多選 | checkbox + checkbox-group | 可以選擇多個(gè)選項(xiàng) |
| 自定義選擇 | 無(wú)組件，通過(guò)邏輯實(shí)現(xiàn) | 更靈活，可以自定義樣式和交互邏輯 |
到此這篇關(guān)于微信小程序?qū)崿F(xiàn)單選、多選及如何通過(guò)變量控制單選/多選功能的文章就介紹到這了,更多相關(guān)微信小程序單選多選內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！
相關(guān)文章
由于各瀏覽器的js實(shí)現(xiàn)不同，因此各瀏覽器的原生對(duì)象（這里不涉及DOM實(shí)現(xiàn)，當(dāng)然這也有區(qū)別）的原生方法也不盡相同，采用原生方法的好處顯而易見(jiàn)，使用兼有效率，而且其中有些方法可能包含在以后的ECMAscript規(guī)范中2011-11-11
這篇文章主要為大家詳細(xì)介紹了JS制作網(wǎng)站吸頂條，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2020-01-01
這篇文章主要為大家詳細(xì)介紹了Bootstrap table表格簡(jiǎn)單操作的相關(guān)資料，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2017-02-02
微信小程序?qū)崿F(xiàn)自動(dòng)回復(fù)圖片消息
這篇文章主要介紹了微信小程序?qū)崿F(xiàn)客服消息自動(dòng)回復(fù)圖片消息，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)吧2023-01-01
基于jquery ajax的多文件上傳進(jìn)度條過(guò)程解析
這篇文章主要介紹了基于jquery ajax的多文件上傳進(jìn)度條過(guò)程解析,文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友可以參考下2019-09-09
今天小編就為大家分享一篇關(guān)于JavaScript之解構(gòu)賦值的理解，小編覺(jué)得內(nèi)容挺不錯(cuò)的，現(xiàn)在分享給大家，具有很好的參考價(jià)值，需要的朋友一起跟隨小編來(lái)看看吧2019-01-01
這篇文章主要介紹了JS實(shí)現(xiàn)的貪吃蛇游戲,結(jié)合具體案例形式分析了javascript實(shí)現(xiàn)貪吃蛇的相關(guān)步驟、原理、算法操作技巧與相關(guān)注意事項(xiàng),需要的朋友可以參考下2019-05-05
這篇文章主要為大家詳細(xì)介紹了JS中雙擊和單擊事件沖突的解決方法，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2018-04-04
JS面向?qū)ο蟮某绦蛟O(shè)計(jì)相關(guān)知識(shí)小結(jié)
這篇文章主要介紹了JS面向?qū)ο蟮某绦蛟O(shè)計(jì),現(xiàn)在很多代碼都是基于面向?qū)ο髮?shí)現(xiàn),需要的朋友可以參考下2018-05-05
js調(diào)用父框架函數(shù)與彈窗調(diào)用父頁(yè)面函數(shù)的簡(jiǎn)單方法
下面小編就為大家?guī)?lái)一篇js調(diào)用父框架函數(shù)與彈窗調(diào)用父頁(yè)面函數(shù)的簡(jiǎn)單方法。小編覺(jué)得挺不錯(cuò)的，現(xiàn)在就分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2016-11-11