checkbox和radio组件

一.效果展示

二.代码

// index.js

Page({

  data: {

    myFontSize: '50rpx',

    myBold: "",

    myItalic: "",

    myUnderline: ""

  },

  /**

   * checkbox‑group组件事件函数

   */

  checkboxChange(e) {

    console.log(e);

    // 定义存放checkbox‑group所有选中项数组

    let selected = []

    // 定义是否加粗的变量并初始化

    let myBold = ''

    // 定义是否斜体的变量并初始化

    let myItalic = ''

    // 定义是否下划线的变量并初始化

    let myUnderline = ''

    // 获取checkbox‑group中的所有选中项

    selected = e.detail.value

    // 循环遍历所有的选中项

    for (let index = 0; index < selected.length; index++) {

      const element = selected[index];

      // 如果加粗的 checkbox 组件被选中

      if (element === 'isBold') {

        myBold = 'bold'

      }

      // 如果 倾斜 的 checkbox 组件被选中

      if (element === 'isItalic') {

        myItalic = 'italic'

      }

      // 如果 下划线的 checkbox 组件被选中

      if (element === 'isUnderline') {

        myUnderline = 'underline'

      }

    }

    // 将局部变量的值赋值给绑定变量，驱动视图层更新

    this.setData({

      myBold,

      myItalic,

      myUnderline

    })

  },

  /**

   * radio‑group组件事件函数

   */

  radioChange(e) {

    console.log(e);

    this.setData({

      // 设置radio的value值

      myFontSize: e.detail.value

    })

  }

})

/**app.wxss**/

.box {

  /* 设置外边距 */

  margin: 20rpx;

  /* 设置内边距 */

  padding: 20rpx;

  /* 设置边框 */

  border: 2rpx solid silver;

}

.title {

  /* 设置字体大小 */

  font-size: 40rpx;

  /* 设置字体加粗 */

  font-weight: bolder;

  /* 设置居中对齐 */

  text-align: center;

  /* 设置下外边框 */

  margin-bottom: 30rpx;

  /* 设置字体颜色 */

  color: red;

}

三.总结

成功使用checkbox和radio组件