您现在的位置是:网站首页> 编程资料编程资料
微信小程序多项选择器checkbox_javascript技巧_
2023-05-24
332人已围观
简介 微信小程序多项选择器checkbox_javascript技巧_
本文实例为大家分享了微信小程序多项选择器checkbox的具体代码,供大家参考,具体内容如下
第一的话就是我们的相关的布局文件:

默认样式 推荐展示样式
然后的话就是我们的小程序的逻辑部分:
Page({ // 在我们的这个位置的话填充我们的相关的数据 onShareAppMessage(){ // 在我们的这个位置的话就是闯进我们的相关的方法 return{ title: 'checkbox', path: 'pages/checkbox/checkbox' } }, // 然后的话就是填充我们的相关的数据: data:{ // 然后的话在我们的这个位置的话就是设置我们的相关的方法 items:[ {value:'usa', name:'影响力'}, { value: 'usa', name: '影响力' }, { value: 'usa', name: '韭菜的自我修养' }, { value: 'usa', name: '你的名字' }, { value: 'usa', name: '怪诞行为学' ,checked: 'true'}, { value: 'usa', name: '教父' }, { value: 'usa', name: '经济学原理' }, { value: 'usa', name: '三国演义' }, { value: 'usa', name: '绝对成交' }, { value: 'usa', name: '行为经济学讲义' }, { value: 'usa', name: '黑天鹅' }, { value: 'usa', name: '灰犀牛' }, ] }, // 在我们的额这个位置的话就是设置我们的相关的方法 // 在我们的这个位置的话就是创建一个有参数的构造方法 checkboxChange(e){ // 在我们的这位置的话就是在我们的控制台中输出我们需要的东西 console.log('checkbox发生change事件,携带value值为:', e.detail.value) const items = this.data.items const values = e.detail.value // 然后的话在我们的这个位置使用我们的for循环来设置创建我们的相关的东西 for (let i = 0, lenI = items.length; i < lenI; ++ i){ // 然后的话就是循环遍历到后就获取到我们的东西 items[i].checked = false for (let j = 0, lenJ = values.length; j < lenJ; ++j){ if (items[i].value === values[j]){ items[i].checked = true break } } } // 然后的话在我们的下面的这个位置的话就是设置我们的相关的方法 this.setData({ items }) } })以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持。
您可能感兴趣的文章:
相关内容
- React useEffect不支持async function示例分析_React_
- useEffect支持async及await使用方式_React_
- vue实现点击按钮倒计时_vue.js_
- 总结分享10个JavaScript代码优化小tips_javascript技巧_
- Vue3中reactive与ref函数使用场景_vue.js_
- js实现上下滑动轮播_javascript技巧_
- JavaScript+CSS实现唯美蝴蝶动画_javascript技巧_
- JS前端并发多个相同的请求控制为只发一个请求方式_JavaScript_
- js实现导航栏上下动画效果_javascript技巧_
- JavaScript中如何让 x == 1 && x == 2 && x == 3 等式成立_javascript技巧_
