uniapp中加入复选框,一般初学者都需要添加的东西,比如爱好进行选择添加
本人是以“班级”为例进行,“班级”按理来说是不应该复选的,但本人比较懒所以就不改了,以此为例进行讲解
<view class="uni-form-item uni-column">
<checkbox-group name="ai" @change="chk"> //定义改变事件用于获取复选框中的值
<label>班级:</label>
<label>
<checkbox value="18Java班" /><text>18Java班</text> //定义复选框的内容1
<checkbox value="19Java班" /><text>19Java班</text> //定义复选框的内容2
</label>
</checkbox-group> //定义复选框的代码块
</view>
注意:获取的复选框的值为多个,所以定已接收的字段也应该是个数组,如果不想要【数组】可以转化为“字符串”
效果如下:
这就是上述代码的效果展示。
想要获取复选框的值,应进行事件的取值
//复选框学生班级(学生班级)chk
chk:function(e){
this.cls=e.detail.value //定义cls获取复选框的数组值
this.cls=this.cls.join(",") //将数组转化为字符串向后台传递
},
这样就可以获取复选框的值!
数组的结果图:
字符串的结果图: