当前位置:Gxlcms > JavaScript > 小程序实现单选多选功能

小程序实现单选多选功能

时间:2021-07-01 10:21:17 帮助过:5人阅读

小程序的单选组件radio和多选组件checkbox的样式只提供更改颜色,这对实际项目中的需求显然是不够的,所以自己模拟实现一个。

踩坑点:小程序不支持操作dom

1、模拟实现多选框:

实现思路:思路非常简单,给每个选项绑定checked属性,类型为布尔值,点击取反即可

  1. <!--wxml-->
  2. <view class='wrap'>
  3. <view class='checkbox-con'>
  4. <checkbox-group bindchange="checkboxChange">
  5. <label class="{{item.checked?'checkbox checked':'checkbox'}}" wx:for="{{checkboxArr}}" bindtap='checkbox' data-index="{{index}}" wx:key="item.name">
  6. <checkbox value="{{item.name}}" checked="{{item.checked}}"/>{{item.name}}
  7. </label>
  8. </checkbox-group>
  9. <button type='primary' bindtap='confirm'>提交</button>
  10. </view>
  11. </view>
  1. /* wxss */
  2. .wrap{
  3. width: 550rpx;
  4. margin: 50rpx auto
  5. }
  6. .checkbox-con{
  7. margin-top: 40rpx;
  8. text-align: center
  9. }
  10. .checkbox{
  11. width: 260rpx;
  12. height: 72rpx;
  13. line-height: 72rpx;
  14. font-size: 28rpx;
  15. color: #888888;
  16. border: 1rpx solid #CECECE;
  17. border-radius: 5rpx;
  18. display: inline-block;
  19. margin: 0 10rpx 20rpx 0;
  20. position: relative
  21. }
  22. .checked{
  23. color: #1A92EC;
  24. background: rgba(49,165,253,0.08);
  25. border: 1rpx solid #31A5FD;
  26. }
  27. .checkbox checkbox{
  28. display: none
  29. }
  30. .checked-img{
  31. width: 28rpx;
  32. height: 28rpx;
  33. position: absolute;
  34. top: 0;
  35. right: 0
  36. }

js: 

  1. Page({
  2. data: {
  3. checkboxArr: [{
  4. name: '选项A',
  5. checked: false
  6. }, {
  7. name: '选项B',
  8. checked: false
  9. }, {
  10. name: '选项C',
  11. checked: false
  12. }, {
  13. name: '选项D',
  14. checked: false
  15. }, {
  16. name: '选项E',
  17. checked: false
  18. }, {
  19. name: '选项F',
  20. checked: false
  21. }],
  22. },
  23. checkbox: function (e) {
  24. var index = e.currentTarget.dataset.index;//获取当前点击的下标
  25. var checkboxArr = this.data.checkboxArr;//选项集合
  26. checkboxArr[index].checked = !checkboxArr[index].checked;//改变当前选中的checked值
  27. this.setData({
  28. checkboxArr: checkboxArr
  29. });
  30. },
  31. checkboxChange: function (e) {
  32. var checkValue = e.detail.value;
  33. this.setData({
  34. checkValue: checkValue
  35. });
  36. },
  37. confirm: function() {// 提交
  38. console.log(this.data.checkValue)//所有选中的项的value
  39. },
  40. })

2、模拟实现单选框

思路:这个和多选差不多,区别就是需要在点击时清空其他项的选中状态,然后再把当前项设置为选中状态

代码也差不多

wxml的话就把check-group标签改为radio-group; js那边就在点击时多加个判断

  1. <!--wxml-->
  2. <view class='wrap'>
  3. <view class='checkbox-con'>
  4. <radio-group bindchange="radioChange">
  5. <label class="{{item.checked?'checkbox checked':'checkbox'}}" wx:for="{{checkboxArr}}" bindtap='radio' data-index="{{index}}" wx:key="item.name">
  6. <checkbox value="{{item.name}}" checked="{{item.checked}}"/>{{item.name}}
  7. </label>
  8. </radio-group>
  9. <button type='primary' bindtap='confirm'>提交</button>
  10. </view>
  11. </view>

  1. Page({
  2. data: {
  3. checkboxArr: [{
  4. name: '选项A',
  5. checked: false
  6. }, {
  7. name: '选项B',
  8. checked: false
  9. }, {
  10. name: '选项C',
  11. checked: false
  12. }, {
  13. name: '选项D',
  14. checked: false
  15. }, {
  16. name: '选项E',
  17. checked: false
  18. }, {
  19. name: '选项F',
  20. checked: false
  21. }],
  22. },
  23. radio: function (e) {
  24. var index = e.currentTarget.dataset.index;//获取当前点击的下标
  25. var checkboxArr = this.data.checkboxArr;//选项集合
  26. if (checkboxArr[index].checked) return;//如果点击的当前已选中则返回
  27. checkboxArr.forEach(item => {
  28. item.checked = false
  29. })
  30. checkboxArr[index].checked = true;//改变当前选中的checked值
  31. this.setData({
  32. checkboxArr: checkboxArr
  33. });
  34. },
  35. radioChange: function (e) {
  36. var checkValue = e.detail.value;
  37. this.setData({
  38. checkValue: checkValue
  39. });
  40. },
  41. confirm: function() {// 提交
  42. console.log(this.data.checkValue)//所有选中的项的value
  43. },
  44. })

最后上个效果截图


以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持脚本之家。

人气教程排行