题目一是单选
题目二、三是多选,
多选比单选多个字段 isSelect
data里面的内容
//单选参考数据
option:[
{options:'A',optionss:'选项A'},
{options:'B',optionss:'选项B'},
{options:'C',optionss:'选项C'},
{options:'D',optionss:'选项D'}
],
//多选参考数据
option2:[
//,'B.选项1b','C.选项c','D.选项d'
{options:'A',optionss:'选项A',isSelect:false},
{options:'B',optionss:'选项B',isSelect:false},
{options:'C',optionss:'选项C',isSelect:false},
{options:'D',optionss:'选项D',isSelect:false}
]
suoy:'',
单选
<view class="top_test_bottom_option {{suoy==item.options?'selected':''}}"
wx:for="{{option}}" data-id="{{item.options}}"
bindtap="select1">
解释:
{{suoy==item.options?‘selected’:’’}}这个是个类名,用来修改选中选项的样式,
{{item.options}}用来JS中获取选中的第几个选项的索引
bindtap=“select1” 方法名
select1:function(e){
var selectid = e.target.dataset.id //获取题号的索引
this.setData({
suoy: selectid
});
console.log(id+"" + this.data.suoy); //可以调试打印
},
选中的样式
.selected{background-color:rgba(41,125,96,0.5)}
多选
<view class="top_test_bottom_option {{item.options?'selected':''}}"
wx:for="{{option}}" data-id="{{item.options}}" data-index='{{index}}'
bindtap="select2">
同上,但是这个select2方法里面的内容不太一样;如下:
select2:function(e){
var index = e.currentTarget.dataset.index; //获取选项索引
var item = this.data.option[index]; //获取选中的那一行数据
item.isSelect= !item.isSelect;
this.setData({
test: this.data.test,
});
},
效果图如下: