本文为大家分享了微信小程序实现多选功能的具体代码，供大家参考，具体内容如下

\"\"

代码：

<!--hotblood_gongkao/pages/answer/answer.w -->
<!-- content -->
<view class=\'answer-list\'>
  <view class=\'answer-child\'>
    <text class=\'answer- \'><text style=\'margin-right:28rpx;\'>{{num + 1}}/{{quesyion.length}}</text>{{question[num][0]}}</text>
    <view class=\'answer-options\'>
      <view class=\"options {{selectIndex[0].sureid?\'select\':\'\'}}\" data-index=\'{{idx}}1\' data-text=\'A\' bindtap=\"{{whether?\'\':\'selectAnswer\'}}\">
        <image class=\"dui {{selectIndex[0].sureid?\'dui2\':\'\'}}\" src=\'../../images/icon-dui.png\' />
        <text><text style=\'margin-right:36rpx;\'> A </text>{{question[num][1]}}</text>
      </view>
      <view class=\"options {{selectIndex[1].sureid?\'select\':\'\'}}\" data-index=\'{{idx}}2\' data-text=\'B\' bindtap=\"{{whether?\'\':\'selectAnswer\'}}\">
        <image class=\"dui {{selectIndex[1].sureid?\'dui2\':\'\'}}\" src=\'../../images/icon-dui.png\' />
        <text><text style=\'margin-right:36rpx;\'> B </text>{{question[num][2]}}</text>
      </view>
      <view class=\"options {{selectIndex[2].sureid?\'select\':\'\'}}\" data-index=\'{{idx}}3\' data-text=\'C\' bindtap=\"{{whether?\'\':\'selectAnswer\'}}\">
        <image class=\"dui {{selectIndex[2].sureid?\'dui2\':\'\'}}\" src=\'../../images/icon-dui.png\' />
        <text><text style=\'margin-right:36rpx;\'> C </text>{{question[num][3]}}</text>
      </view>
      <view class=\"options {{selectIndex[3].sureid?\'select\':\'\'}}\" data-index=\'{{idx}}4\' data-text=\'D\' bindtap=\"{{whether?\'\':\'selectAnswer\'}}\">
        <image class=\"dui {{selectIndex[3].sureid?\'dui2\':\'\'}}\" src=\'../../images/icon-dui.png\' />
        <text><text style=\'margin-right:36rpx;\'> D </text>{{question[num][4]}}</text>
      </view>
    </view>
  </view>
  <view class=\"answer {{isWan?\'isShow\':\'isHide\'}}\">
    <text>正确答案{{question[num][3]}}</text>
  </view>
  <view class=\"subBtn {{isque?\'isShow\':\'isHide\'}}\" bindtap=\'confirm\'>
    <text>确定</text>
  </view>
  <view class=\"subBtn {{isOne?\'isHide\':\'isShow\'}}\" bindtap=\'next\'>
    <text>{{con}}</text>
  </view>
  <view class=\"subBtn {{iswancheng?\'isShow\':\'isHide\'}}\" bindtap=\'submit\'>
    <text>提交答卷</text>
  </view>
</view>

CSS: 

/* hotblood_gongkao/pages/answer/answer.wxss */
 
/*   */
. Img{
  width: 734rpx;
  height: 45rpx;
  position: fixed;
  top: 0;
  display: flex;
  flex-direction: row;
  align-items: center;
  left: 50%;
  background: #fbfbfb;
  margin-left: -367rpx;
  z-index: 10;
}
. Img image{
  height: 35rpx;
  width: 100%;
}
/* end */
page{
  height: 100%;
  width: 100%;
  background: #fbfbfb;
}
.isHide{
  display: none;
}
.isShow{
  display: block;
}
. {
  font-size: 34rpx;
  color: #a6a6a6;
  margin: 69rpx 0 0 0;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}
.answer-list{
 
}
.answer-child{
  width: 672rpx;
  margin: 0 auto;
  background: #fff;
  border-radius: 20rpx;
  padding-top:34rpx; 
  margin-bottom: 20rpx;
  margin-top: 72rpx;
  box-sizing: border-box;
  box-shadow: 0 0 4rpx #dcdcdc;
}
.answer- {
  font-size: 32rpx;
  margin: 0 0 0 52rpx;
}
.answer-options{
  display: flex;
  flex-direction: column;
  width: 642rpx;
  margin: 32rpx auto 0 auto;
}
.options{
  width: 100%;
  height: 72rpx;
  line-height: 72rpx;
  font-size: 32rpx;
  padding-left: 30rpx;
  box-sizing: border-box;
  margin-bottom: 4rpx;
  position: relative;
  border: 2rpx solid #fff;
 
}
.dui{
  position: absolute;
  height: 41rpx;
  width: 59rpx;
  top:50%;
  margin-top: -20rpx;
  right: 16rpx;
  display: none;
}
.dui2{
  display: block!important;
}
.select{
  border: 2rpx solid #4ab07e;
  box-sizing: border-box;
  
}
.submit{
  height: 120rpx;
  width: 100%;
  background: #4ab07e;
  color: #fff;
  font-size: 34rpx;
  line-height: 120rpx;
  text-align: center;
  position: fixed;
  left: 0;
  bottom: 0;
}
/* 正确答案 */
.answer{
  width: 100%;
  text-align: center;
  color: #ff122f;
  font-size: 34rpx;
  font-weight: bold;
  margin-top: 64rpx;
}
 
/* end */
/* 下一题 */
.subBtn{
  width: 304rpx;
  height: 86rpx;
  background: #4ab07e;
  color: #fff;
  font-size: 34rpx;
  text-align: center;
  line-height: 86rpx;
  border-radius: 20rpx;
  margin: 190rpx auto 0 auto;
}

js:

// hotblood_gongkao/pages/answer/answer.js
const app = getApp();
Page({
 
  /**
   * 页面的初始数据
   */
  data: {
    question: [
      [\"今天是个好日子\", \"halou word\", \"java\", \" \", \'c#\'],
      [\"今天是个好日子\", \"halou word\", \"java\", \" \", \'c#\'],
    ], //题库
    index: 0, //选择的索引
    wrong: [], //错误
    border: \'\',
    num: 0,
    con: \'下一题\',
    isOne: true,
    isWan: false,
    iswancheng: false,
    isque: false,
    whether: false,
    correct: [], //正确
    duiList: 0, //答对的个数
    cuoList: 0, //答错的个数
    selectIndex: [{
        sureid: false
      },
      {
        sureid: false
      },
      {
        sureid: false
      },
      {
        sureid: false
      },
    ],
  },
 
  /**
   * 生命周期函数--监听页面加载
   */
   : function(options) {
    this.setData({
 
    })
  },
 
  /**
   * 生命周期函数--监听页面初次渲染完成
   */
  onReady: function() {
 
  },
  // 提交答卷
  submit: function(e) {
    console.log(this.data.duiList);
    console.log(this.data.cuoList);
    var num = this.data.num; //当前题目下标
    var question = this.data.question; //题库
    var duiList = this.data.duiList; //答对多少题
    var cuoList = this.data.cuoList; //答错多少题
    //获得题目对象的长度
    var arr =  .keys(question);
    var len = arr.length;
    if ((num + 1) == len) {
      var grade = (100 / len) * duiList;
      console.log(grade);
      wx.redirectTo({
        url: \'../chengjiu/chengjiu?grade=\' + grade,
      })
    }
  },
  // 确认选择
  confirm: function() {
    var num = this.data.num;
    var question = this.data.question; //题库
    //获得题目对象的长度
    var arr =  .keys(question);
    var len = arr.length;
    if ((num + 1) == len) {
      this.setData({
        iswancheng: true,
        isOne: true,
        isWan: true,
        isque: false
      })
    } else {
      this.setData({
        isOne: false,
        whether: true,
        isque: false,
        isWan: true
      })
    }
 
  },
  // 下一题
  next: function() {
    var num = this.data.num; //当前题目下标
    this.setData({
      num: num + 1,
      isOne: true,
      isWan: false,
      whether: false,
      index: 0
    })
  },
  // 选择答案
  selectAnswer: function(e) {
    console.log(e);
    var index1 = e.currentTarget.dataset.index - 1; //当前点击元素的自定义数据，这个很关键
    var selectIndex = this.data.selectIndex; //取到data里的selectIndex
    selectIndex[index1].sureid = !selectIndex[index1].sureid; //点击就赋相反的值
    console.log(selectIndex[index1])
    this.setData({
      selectIndex: selectIndex //将已改变属性的json数组更新
    })
    console.log(this.data.selectIndex.in_array(true))
    if (selectIndex.in_array(true) == false) {
      this.setData({
        isque: false
      })
    } else {
      var question = this.data.question; //题库
      var num = this.data.num; //当前题目下标
      var text = e.currentTarget.dataset.text; //选择的答案
      var duiList = this.data.duiList; //答对多少题
      var cuoList = this.data.cuoList; //答错多少题
 
      //获得题目对象的长度
      var arr =  .keys(question);
      var len = arr.length;
      //当前答题为最后一题
      if ((num + 1) == len) {
        //判断选择的答案和正确答案是否一致
        if (text == question[num][3]) {
          duiList = duiList + 1;
          this.setData({
            duiList: duiList,
            isque: true
          })
        } else {
          cuoList = cuoList + 1;
          this.setData({
            cuoList: cuoList,
            isque: true
          })
        }
      } else {
        //判断选择的答案和正确答案是否一致
        if (text == question[num][3]) {
          duiList = duiList + 1;
          this.setData({
            duiList: duiList,
            isque: true
          })
        } else {
          cuoList = cuoList + 1;
          this.setData({
            cuoList: cuoList,
            isque: true
          })
        }
      }
    }
 
 
  },
  /**
   * 生命周期函数--监听页面显示
   */
  onShow: function() {
    this.question();
  },
  
  /**
   * 生命周期函数--监听页面隐藏
   */
  onHide: function() {
 
  },
 
  /**
   * 生命周期函数--监听页面卸载
   */
   : function() {
 
  },
 
  /**
   * 页面相关事件处理函数--监听用户下拉动作
   */
  onPullDownRefresh: function() {
 
  },
 
  /**
   * 页面上拉触底事件的处理函数
   */
  onReachBottom: function() {
 
  },
 
  /**
   * 用户点击右上角分享
   */
  onShareAppMessage: function() {
 
  }
})
Array.prototype.in_array = function(element) {
  for (var i = 0; i < this.length; i++) {
    if (this[i].sureid == element) {
      return true;
    }
  }
  return false;
}

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

继续阅读与本文标签相同的文章

无标签
最新文章 最热文章
收藏 打印

特别推荐 2026年05月19日 星期二

精彩发现

热门标签

阻止表单提交 窗口 关闭浏览器 清除 CDATA css文件 光标位置 坐标 javascrpt !important 超链接 数字

相关文章