本文介绍如何在小程序中获取复选框选择的数值，并通过bindchange事件处理函数进行展示。示例展示了两种不同的WXML写法，一种是直接编写，另一种使用循环渲染。在JavaScript中，通过event.detail.value获取已选择的水果数组。同时提到单选框的处理方式与复选框类似，只需将checkbox替换为radio。最后，作者分享了后续学习计划和可能的转变，包括考虑采用视频形式进行知识汇总，以吸引更广泛的受众。
选自杨敬华画作。我，一直为亲手促成其成为同事感到骄傲，类似让我骄傲的，还有几位。
图文，超过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!
594
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
