WeChatアプレットで書かれた多肢選択問題の種類

私が得た要件は投票タイプであるため、データはバックエンドから渡されたデータです。同様の多肢選択式の質問についてもこのメソッドを参照できますが、1ページしか表示されない場合は適用されません。
効果画像:
ここに画像の説明を挿入します

<view class="">
          <view wx:for="{
    
    {ITEMSLIST}}" wx:key="index" class="guiyue-item" >
              <view class="guiyue-item-title">
                    <view>{
    
    {
    
    item.TITLE}}</view>
              </view>
                  <view class="weui-cells weui-cells_after-title">
                        <radio-group bindchange="radioChange" data-index="{
    
    {index}}">
                        <label class="weui-cell weui-check__label" wx:for="{
    
    {item.zhuangtai}}" wx:for-item="value" wx:key="{
    
    {value}}"  data-seleindex="{
    
    {item.ID}}">

                        <view class="weui-cell__hd">
                              <radio value="{
    
    {value.type}}" />
                        </view>
                        <view class="weui-cell__bd">{
    
    {
    
    value.value}}</view>
                        </label>
                        </radio-group>
                  </view>
          </view>
          <button type="primary" bindtap="handleOk">确定</button>
      </view>

js:

const app = getApp()
Page({
    
    
  data: {
    
    
    ITEMSLIST: [{
    
    FDMJ: 131.11,
      FDPS: 1,
      FJ: "/common/Pdf/BE7BA11245BB43BE96C4790773796633.pdf",
      ID: "d5c0b96b-4949-4f37-9c3c-558251a180bf",
      TITLE: "1.《学林博雅天城业主委员会工作规则》(草拟稿)",
      zhuangtai:[{
    
    value: '同意',type:1,ischecked:false,},{
    
    value: '反对',type:2,ischecked:false,},{
    
    value: '弃权',type:3,ischecked:false,}]},
      {
    
    FDMJ: null,
      FDPS: null,
      FJ: "/common/Pdf/DEE42E735F6F471DBCA176F3EBBACA0B.pdf",
      ID: "3c93f40a-15e0-472e-99a5-5fe6c8cd00fc",
      TITLE: "2.《学林博雅天城业主大会议事规则》(草拟稿)",
      zhuangtai:[{
    
    value: '同意',type:1,ischecked:false,},{
    
    value: '反对',type:2,ischecked:false,},{
    
    value: '弃权',type:3,ischecked:false,}]
    },{
    
    FDMJ: null,
      FDPS: null,
      FJ: "/common/Pdf/10B2374EC91642CC8138EABACFBFACDB.pdf",
      ID: "e087d4a0-16ec-4437-9629-71427117f981",
      TITLE: "3.《学林博雅天城管理规约》",
      zhuangtai:[{
    
    value: '同意',type:1,ischecked:false,},{
    
    value: '反对',type:2,ischecked:false,},{
    
    value: '弃权',type:3,ischecked:false,}]
    },
      {
    
    FDMJ: null,
      FDPS: null,
      FJ: "/common/Pdf/234FEBF60BEB4F37B78F2320A78E652C.pdf",
      ID: "99716da1-4523-4c24-aa9f-d5fbf2f66f36",
      TITLE: "4.《学林博雅天城主委员会选举办法》",
      zhuangtai:[{
    
    value: '同意',type:1,ischecked:false,},{
    
    value: '反对',type:2,ischecked:false,},{
    
    value: '弃权',type:3,ischecked:false,}]}],
      GYJSON:"[{'id':'3c93f40a-15e0-472e-99a5-5fe6c8cd00fc','TYPE':1},{'id':'99716da1-4523-4c24-aa9f-d5fbf2f66f36','TYPE':1},{'id':'d5c0b96b-4949-4f37-9c3c-558251a180bf','TYPE':2},{'id':'e087d4a0-16ec-4437-9629-71427117f981','TYPE':3}]"
  },
  //点击每个题的选项
  radioChange(e) {
    
    
    console.log(e)
    let parendindex = e.currentTarget.dataset.seleindex  //父亲id
    const items = this.data.ITEMSLIST[e.currentTarget.dataset.index].zhuangtai
    for (let i = 0, len = items.length; i < len; ++i) {
    
    
      items[i].checked = items[i].value === e.detail.value
      this.data.ITEMSLIST[e.currentTarget.dataset.index].istype = e.detail.value
    }
    
    let arr = []
    this.data.ITEMSLIST.forEach(items => {
    
    
      arr.push({
    
    
        id: items.ID,
        TYPE: items.istype
      })
    })
    this.setData({
    
    
      isarr: arr
    })
  },
  //点击确定
  handleOk(){
    
    
    if(this.data.isarr.length == 4){
    
    
      console.log(this.data.isarr)
    }
    
  }
})
  

おすすめ

転載: blog.csdn.net/qq_45432996/article/details/109151410