小程序表单组件--复选框/input

最新推荐文章于 2024-08-23 11:16:55 发布

有所执着

最新推荐文章于 2024-08-23 11:16:55 发布

阅读量3.2k

点赞数 1

本文链接：https://blog.csdn.net/lljxk2008/article/details/81202957

版权

本文介绍了小程序中复选框与input文本输入框的使用。复选框需放在checkbox-group内，bindchange事件捕获选中状态变化，label增强用户体验，value定义提交值。input是块级元素，type属性决定输入类型，如'text'、'number'、'password'。placeholder用于提示，value为默认值。此外，讨论了如何设置placeholder样式，以及其他属性如maxlength、disabled和auto-focus。bindinput事件监听用户输入，并可通过返回值进行处理。

摘要由CSDN通过智能技术生成

小程序中的复选框和html中相似, 可以选择多个值并提交

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

一组复选框需要放入checkbox-group中

bindchange是勾选或取消勾选复选框时触发的事件

label和html中相同, 增加勾选的友好性

value是传递时要使用的值

checked是默认勾选中的复选框

Page({
  data: {
    items: [                        /*数组中的元素是对象*/
      { name: 'USA', value: '美国' },
      { name: 'CHN', value: '中国', checked: 'true' },
      { name: 'BRA', value: '巴西' },
      { name: 'JPN', value: '日本' },
      { name: 'ENG', value: '英国' },
      { name: 'TUR', value: '法国&