专栏首页前端资源微信小程序的单选框和复选框的使用

微信小程序的单选框和复选框的使用

微信小程序的 input 只支持输入框,而单选框和复选框分别采用了新的标签 radio 和 checkbox 。

redio 单选项目:

WXML:

<radio-group class="radio-group" bindchange="radioChange">
  <label class="radio" wx:for="{{items}}">
    <radio value="{{item.name}}" checked="{{item.checked}}" />
    {{item.value}}
  </label>
</radio-group>

JS:

Page({  data: {    items: [
      {name: 'USA', value: '美国'},
      {name: 'CHN', value: '中国', checked: 'true'},
      {name: 'BRA', value: '巴西'},
      {name: 'JPN', value: '日本'},
      {name: 'ENG', value: '英国'},
      {name: 'TUR', value: '法国'},
    ]
  },
  radioChange(e) {    console.log('radio发生change事件,携带value值为:', e.detail.value)
  }
})

checkbox 多选项目:

与单选类似

WXML:

<checkbox-group bindchange="checkboxChange">
  <label class="checkbox" wx:for="{{items}}">
    <checkbox value="{{item.name}}" checked="{{item.checked}}" />
    {{item.value}}
  </label>
</checkbox-group>

JS:

Page({
  data: {
    items: [
      {name: 'USA', value: '美国'},
      {name: 'CHN', value: '中国', checked: 'true'},
      {name: 'BRA', value: '巴西'},
      {name: 'JPN', value: '日本'},
      {name: 'ENG', value: '英国'},
      {name: 'TUR', value: '法国'},
    ]
  },
  checkboxChange(e) {
    console.log('checkbox发生change事件,携带value值为:', e.detail.value)
  }
})

声明:本文由w3h5原创,转载请注明出处:《微信小程序的单选框和复选框的使用》 https://www.w3h5.com/post/257.html

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

我来说两句

0 条评论
登录 后参与评论

相关文章

  • 常用meta标签属性整理总汇

    注意,很多人使用initial-scale=1到非响应式网站上,这会让网站以100%宽度渲染,用户需要手动移动页面或者缩放。如果和initial-scale=1...

    德顺
  • JS修改input的value值,打印出来还是之前的值的解决办法

    使用 JS 修改 input 的 value 值为 10 ,但是打印出来还是之前的 1 。

    德顺
  • 移动端手机web前端meta通用设置

    德顺
  • JS使用循环按指定倍数分割数组组成新的数组的方法

     今天一个新人同事问了我一个问题,就是有一个像下边这种不知道具体长度的数组,想以每4个为一组,重新组合为一个二维数组,很简单的需求只需要用到一个循环再去取余数就...

    李文杨
  • HTML5-输入验证

    HTML5引入了对输入验证的支持。设计者可告知浏览器自己需要什么类型的数据,然后浏览器在提交表单之前会使用这些信息检查用户输入的数据是否有效。其好处是:用户可以...

    奋飛
  • 【python学习】新手基础程序练习(二

    用户2398817
  • 普京担心人工智能会形成垄断,表示谁主导AI谁将统治世界

    颜萌 编译自 Quartz 量子位 出品 | 公众号 QbitAI 尽管微软、谷歌等一直鼓吹人工智能对社会有益,但并不是每个人都会考虑通过算法让世界更好。 周五...

    量子位
  • Django项目Mysql添加索引

    在Django数据库访问优化中一开始的时候就有提到Django有一个Field.db_index的字段,用来帮你建立表索引,这在初始化数据库时是有效的。数据库建...

    the5fire
  • 如何把菜单添加到另外一个VSPackage的菜单里?

    在LearnVSXNow系列译文的第6篇发布后,有个朋友问了这么一个问题:“如果我想将一个Package的UI元素放至另外一个第三方的Package的...

    明年我18
  • cssjshtml echart世界地图

    葫芦

扫码关注云+社区

领取腾讯云代金券