h5 頁面 實現單選題,多選題功能。


效果圖:

 

 

 

 

項目要求:

1:實現單選題和多選題區分 (這個根據后端傳來的數據判斷 )   

2 單選選中效果 和  多選選中效果(利用input 和label ) 

3.答題成功與失敗 分單選和多選的情況   ;  單選的時候(將選中的答案與正確答案比較,如果相等則正確,反之錯誤)多選的時候(利用map遍歷數組,在利用arr.includes(item) , arr 是遍歷的正確答案數組    item 是map 遍歷的選中的答案數組     如果item 在 arr 中   (例如:A 在【A,B】中) 則arr.includes(item)返回true  拿一個計數器計數 ,但答對的數量與正確答案的數量相等時 , 則回答正確 ,反之錯誤)

 

 注意事項:

首先input 和 label     input 有 type = radio 和 checkbox 來切換單選和多選;

 

利用input 的 v-model 可以將 選中的值 ,雙向綁定在數組picked 數組里    去掉也同時刪除.

還有就是!! 可能label 樣式不好修改   , 將label的css樣式中的display:block ; 則可以實現       

 當然也可以用  原生 js   遍歷 在遍歷 什么的 也可以;加油!!


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM