layui获取checkbox选中值_小程序之十二 获取多选按钮数值及后续想法
選自楊敬華畫作。我，一直為親手促成其成為同事感到驕傲，類似讓我驕傲的，還有幾位。
圖文，超過1000字，就沒有耐心看完，我盡量控制在1000字以內！
今天，編個程，展示一下復選款數據獲取方式
需求：從五種水果中，選擇你愛吃的，在console(控制臺)上打印出來
知識點：要把放在中，然后通過bindchange傳遞事件參數給JS處理.
單選框，道理一樣，要把放在中，然后通過bindchange傳遞事件參數給JS處理.
先看WXML，有兩種寫法啊，一種是直接寫：
<checkbox-group?class="test"?bindchange="bindchangeDeal">
??<checkbox?value="Apple">蘋果checkbox>
??<checkbox?value="Orange">桔子checkbox>
??<checkbox?value="Banana">香蕉checkbox>
??<checkbox?value="Pear">雪梨checkbox>
??<checkbox?value="Mango">芒果checkbox>
checkbox-group>
解釋一下啊，bindchange是組件checkbox-group或radio-group的屬性，表示當此組件受到點擊時，該組件將調用bindchange屬性值所指出的函數，或稱為事件處理函數，該函數要在.js中有定義，事件數值通過事件處理函數的形參傳遞！
對應的.js如下：
Page({
??data:{
??},
????bindchangeDeal:function(event){
?????console.log("已選擇的水果:",event);//輸出事件參數event，event這個名字可以自己起啊
??????console.log("已選擇的水果:",event.detail);//這個看event對象的哪個屬性含有所選的值呢
??????console.log("已選擇的水果:",event.detail.value);//再往下看，在這里！結果，是個數組啊！
},
})
對應的WXSS如下：
.test{
????margin-top:?50rpx;
????font-size:?14px;
????display:?flex;
????flex-direction:?row;
????justify-content:?space-around;
}
WXML的第二種寫法，使用循環渲染，將數據定義在.js的data對象中，WXML如下：
<checkbox-group?class="test"?bindchange="bindchangeDeal">
??<checkbox?wx:for="{{itemList}}"?value="{{item.nameValue}}">{{item.name}}checkbox>
checkbox-group>
對應的.JS如下，主要是注意itemList這個對象數組的定義！
Page({
??data:{
????itemList:[
??????{name:"蘋果",nameValue:"Apple"},
??????{name:"桔子",nameValue:"Orange"},
??????{name:"香蕉",nameValue:"Banana"},
??????{name:"雪梨",nameValue:"Pear"},
??????{name:"芒果",nameValue:"Mango"}
????]?
??},
bindchangeDeal:function(event){
??????????console.log("已選擇的水果:",event);//輸出事件參數event，event這個名字可以自己起啊
??????????console.log("已選擇的水果:",event.detail);//這個看event對象的哪個屬性含有所選的值呢
??????????console.log("已選擇的水果:",event.detail.value);//再往下看，在這里！
????????},
})
wxss沒有改變。
上述兩種WXML的執行效果相同，頁面展示如下：
控制臺效果，自行動手做一下吧。
單選框跟復選框的道理一樣，只是將checkbox改為radio就以了！
支持我！點贊！
支持我！點”在看“更給力！
后續想法：
oh，因為獲得阿單提供的小程序視頻教學資料，讓我下決心暫停我的小程序學習內容更新了，兩個意思，一是阿單傳給我的東西，很系統的91課，看顆粒度，跟我規劃的差不多，我已經寫了12課，還有80節，至少還需要80天，大概三個月吧，那就到年底了！不行，這個時間太長了！我得先把幾個大事兒開個頭兒，才能搞這種操作性的東西；
二是，我的初心是匯總小程序知識點，基本是文字的，但是，這個東西，作為知識點匯總，只能自己用，后續，籌劃嘗試視頻方式替代現在的方式。
也許，我還會延續現在的方式更新，但是，會慢下來呢！我在考慮換個方式，繼續我的小程序之旅，換個方式的目標是能被更多非朋友圈內人士接受！等著我.......
雙節假期我創立并維護了自己的訂閱號，很多朋友賞臉，點贊，我的同事、朋友還有我在建總行工作時的領導也在給我點“在看”，多謝啊！多謝！
今生有緣，我們共事幾年，有你無憾，永遠是朋友！
Never backdown!
總結
以上是生活随笔為你收集整理的layui获取checkbox选中值_小程序之十二 获取多选按钮数值及后续想法的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： python替换缺失值_python 缺
- 下一篇： 手机qq2008触屏版_天猫精灵 CC1