Detailed introduction of WeChat applet checkbox component

高洛峰
Release: 2017-03-21 16:18:13
Original
2450 people have browsed it

This article mainly introduces relevant information about the detailed introduction of the checkbox component of the WeChat applet. Friends who need it can refer to it

Detailed introduction of WeChat applet checkbox component

I have to complain about the default style of the checkbox. A bit ugly! ! ! The checkbox component is a multi-select box that is placed in the checkbox-group, and listening events are set in the checkbox-group (which can only contain checkboxes).

checkbox-group listening method:

Detailed introduction of WeChat applet checkbox component

##checkbox multi-select attribute:

Detailed introduction of WeChat applet checkbox component

wxml


<!--checkbox-group就是一个checkbox组 有个监听事件bindchange,监听数据选中和取消-->
<checkbox-group bindchange="listenCheckboxChange">
<!--这里用label显示内容,for循环写法 wx:for-items 默认item为每一项-->
 <label style="display: flex;" wx:for-items="{{items}}">
 <!--value值和默认选中状态都是通过数据绑定在js中的-->
  <checkbox value="{{item.name}}" checked="{{item.checked}}"/>{{item.value}}
 </label>
</checkbox-group>
Copy after login

js


Page({
 /**
  * 初始化数据
  */
 data:{
 items: [
  {name: &#39;JAVA&#39;, value: &#39;Android&#39;, checked: &#39;true&#39;},
  {name: &#39;Object-C&#39;, value: &#39;IOS&#39;},
  {name: &#39;JSX&#39;, value: &#39;ReactNative&#39;},
  {name: &#39;JS&#39;, value: &#39;wechat&#39;},
  {name: &#39;Python&#39;, value: &#39;Web&#39;}
 ]
 },

 /**
 * 监听checkbox事件
 */
 listenCheckboxChange:function(e) {
  console.log(&#39;当checkbox-group中的checkbox选中或者取消是我被调用&#39;);
  //打印对象包含的详细信息
  console.log(e);

 },

 onLoad:function(options){
 // 页面初始化 options为页面跳转所带来的参数
 },
 onReady:function(){
 // 页面渲染完成
 },
 onShow:function(){
 // 页面显示
 },
 onHide:function(){
 // 页面隐藏
 },
 onUnload:function(){
 // 页面关闭
 }
})
Copy after login

The above is the detailed content of Detailed introduction of WeChat applet checkbox component. For more information, please follow other related articles on the PHP Chinese website!

Related labels:
source:php.cn
Statement of this Website
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn
Popular Tutorials
More>
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template
About us Disclaimer Sitemap
php.cn:Public welfare online PHP training,Help PHP learners grow quickly!