分享怎么使用微信小程序的checkbox多选项。

下面的这篇文章是教大家怎么使用微信小程序的checkbox多选项?教程简单易学,有需要的小伙伴就赶紧和酷牛教程小编一起来学习吧。

组件说明:

checkbox是小程序表单组件中的一个组件,作用是在表单中引导用户做出选择。

要使用checkbox组件,还需要在同组中所有的checkbox标签外使用checkbox-group标签。

checkbox-group标签的作用是可以为其中的checkbox标签绑定onchange事件,当用户做出选择的时候可以引导用户。

单独的checkbox标签不会触发onchange事件,只有在checkbox-group上绑定才会触发。

组件用法:

微信小程序的checkbox多选项是如何使用的呢?

wxml

<view>

<checkbox-group class=\"checkbox-group\" bindchange=\"changed\">

<label class=\"items\" wx:for=\"{{item}}\">

<checkbox value=\"{{item.value}}\" checked=\"{{item.checked}}\" disabled=\"{{item.disabled}}\"/>

{{item.name}}

</label>

</checkbox-group>

</view>

复制代码

js

Page({

data:{

item: [

{\\\'name\\\': \\\'俄罗斯\\\', \\\'value\\\': \\\'RS\\\', \\\'disabled\\\': false},

{\\\'name\\\': \\\'美国\\\', \\\'value\\\': \\\'US\\\', \\\'disabled\\\': false},

{\\\'name\\\': \\\'中国\\\', \\\'value\\\': \\\'CN\\\', \\\'disabled\\\': false, \\\'checked\\\': true},

{\\\'name\\\': \\\'英国\\\', \\\'value\\\': \\\'UK\\\', \\\'disabled\\\': false},

{\\\'name\\\': \\\'日本\\\', \\\'value\\\': \\\'JP\\\', \\\'disabled\\\': true}

]

},

changed: function(e) {

console.info(\\\'你选择了\\\' + e.detail.value);

}

})

wxss

.items {

display: block;

margin: 30rpx;

}

复制代码

以上就是怎么使用微信小程序的checkbox多选项的全部内容了,大家都学会了吗?

本文来自投稿,不代表酷牛教程立场,如若转载,请注明出处:https://www.xukn.com/97479.html

(0)
上一篇 2025-01-09 10:31
下一篇 2025-01-09 10:45

相关推荐