微信小程序使用checkbox顯示多項(xiàng)選擇框功能【附源碼下載】

更新時(shí)間：2017年12月11日 09:41:33 作者：FutrueJet

這篇文章主要介紹了微信小程序使用checkbox顯示多項(xiàng)選擇框功能,涉及相關(guān)事件綁定與元素遍歷操作技巧,并附帶源碼供讀者下載參考,需要的朋友可以參考下

本文實(shí)例講述了微信小程序使用checkbox顯示多項(xiàng)選擇框功能。分享給大家供大家參考，具體如下：

1、效果展示

2、關(guān)鍵代碼

① index.wxml

<checkbox-group bindchange="checkboxgroupBindchange">
 <checkbox value="checkbox1">checkbox1</checkbox>
 <checkbox value="checkbox2">checkbox2</checkbox>
 <checkbox value="checkbox3">checkbox3</checkbox>
</checkbox-group>
<view>提示：{{text}}</view>

② index.js

Page({
 data:{
  // text:"這是一個(gè)頁(yè)面"
  text:''
 },
 checkboxgroupBindchange:function(e){
  var temp1=e.detail.value
  var temp2=''
  console.log(temp1)
  if(temp1.length!=0){
   for(var i=0,len=temp1.length;i<len;i++){
    temp2=temp2+temp1[i]+','
   }
   this.setData({
    text:'您選擇了：'+temp2
   })
  }else{
   this.setData({
    text:''
   })
  }
 }
})

3、源代碼點(diǎn)擊此處本站下載。

關(guān)于checkbox組件的詳細(xì)用法說(shuō)明還可參考官網(wǎng)：https://mp.weixin.qq.com/debug/wxadoc/dev/component/checkbox.html

希望本文所述對(duì)大家微信小程序開(kāi)發(fā)有所幫助。

您可能感興趣的文章:

相關(guān)文章

詳解axios是如何處理異常的
本文我們將討論?axios?中是如何處理異常的,在此之前,我們先了解以下?axios?中各種類(lèi)型的異常,文中通過(guò)代碼示例講解的非常詳細(xì),具有一定的參考價(jià)值,需要的朋友可以參考下
2024-05-05
uniapp web-view組件雙向通信的問(wèn)題記錄
本文主要介紹在uniapp中頁(yè)面與webview組件內(nèi)頁(yè)面的雙向通信問(wèn)題,本文通過(guò)圖文實(shí)例代碼相結(jié)合給大家介紹的非常詳細(xì),感興趣的朋友跟隨小編一起看看吧
2024-07-07
JavaScript setinterval延遲一秒解決方案
這篇文章主要介紹了JavaScript setinterval延遲一秒解決方案,本篇文章通過(guò)簡(jiǎn)要的案例,講解了該項(xiàng)技術(shù)的了解與使用,以下就是詳細(xì)內(nèi)容,需要的朋友可以參考下
2021-09-09
JS中位置與大小的獲取方法
下面小編就為大家?guī)?lái)一篇JS中位置與大小的獲取方法。小編覺(jué)得挺不錯(cuò)的，現(xiàn)在就分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧
2016-11-11
js的[defer]和[async]屬性
這篇文章主要介紹了js的<script>的[defer]和[async]屬性,需要的朋友可以參考下
2014-11-11
JavaScript實(shí)現(xiàn)拖動(dòng)對(duì)話框效果的實(shí)現(xiàn)代碼
這篇文章主要介紹了JavaScript實(shí)現(xiàn)拖動(dòng)對(duì)話框效果，本文通過(guò)實(shí)例代碼給大家介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值，需要的朋友可以參考下
2020-10-10
JS實(shí)現(xiàn)的手機(jī)端精簡(jiǎn)幻燈片效果
這篇文章主要介紹了JS實(shí)現(xiàn)的手機(jī)端精簡(jiǎn)幻燈片效果,涉及javascript結(jié)合時(shí)間函數(shù)動(dòng)態(tài)修改頁(yè)面元素的相關(guān)技巧,需要的朋友可以參考下
2016-09-09
mui js控制開(kāi)關(guān)狀態(tài)、修改switch開(kāi)關(guān)的值方法
今天小編就為大家分享一篇mui js控制開(kāi)關(guān)狀態(tài)、修改switch開(kāi)關(guān)的值方法，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧
2019-09-09
關(guān)于Bootstrap彈出框無(wú)法調(diào)用問(wèn)題的解決辦法
這篇文章主要介紹了關(guān)于Bootstrap彈出框無(wú)法調(diào)用問(wèn)題的解決辦法的相關(guān)資料,需要的朋友可以參考下
2016-03-03
對(duì)js eval()函數(shù)的一些見(jiàn)解
下面小編就為大家?guī)?lái)一篇對(duì)js eval()函數(shù)的一些見(jiàn)解。小編覺(jué)得挺不錯(cuò)的，現(xiàn)在就分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧
2016-08-08