您现在的位置: 首页 > 开发编程 > HBuilder教程 > 正文

MUI - 复选框、单选框、使用js获取选择值

作者:admin来源:网络浏览:时间:2018-05-08 22:03:02我要评论
分享到
MUI - 复选框、单选框、使用js获取选择值

  1. <!DOCTYPE html> 
  2. <html> 
  3. <head> 
  4.     <meta charset="utf-8"
  5.     <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" /> 
  6.     <title></title> 
  7.     <script src="js/mui.min.js"></script> 
  8.     <link href="css/mui.min.css" rel="stylesheet"/> 
  9.     <script type="text/javascript" charset="utf-8"
  10.           mui.init(); 
  11.     </script> 
  12. </head> 
  13. <body> 
  14.     <header class="mui-bar mui-bar-nav"
  15.     <a class="mui-action-back mui-icon mui-icon-left-nav mui-pull-left"></a> 
  16.     <h1 class="mui-title">hello</h1> 
  17. </header> 
  18. <div class="mui-content"
  19. <span class="mui-badge mui-badge-inverted">1</span> 
  20. <span class="mui-badge mui-badge-primary mui-badge-inverted">2</span> 
  21.  
  22.     <div class="mui-input-row mui-radio mui-left"
  23.         <label>运动</label> 
  24.         <input name="checkbox1" value="运动" type="radio" class="rds"/> 
  25.     </div> 
  26.  
  27.     <div class="mui-input-row mui-radio mui-left"
  28.       <label>篮球</label> 
  29.       <input name="checkbox1" value="篮球" type="radio" class="rds"/> 
  30.     </div> 
  31.  
  32. <button type="botton" onclick="getVals();">获取复选框的值</button> 
  33.  
  34.  
  35.     <div class="mui-input-row mui-checkbox mui-left"
  36.         <label>运动</label> 
  37.         <input name="checkbox1" value="运动" type="checkbox" class="rdss"/> 
  38.     </div> 
  39.  
  40.     <div class="mui-input-row mui-checkbox mui-left"
  41.       <label>篮球</label> 
  42.       <input name="checkbox1" value="篮球" type="checkbox" class="rdss"/> 
  43.     </div> 
  44.  
  45. <button type="botton" onclick="getVal();">获取多选框的值</button> 
  46.  
  47. </div> 
  48. </body> 
  49. <script type="text/javascript"
  50.     /*复选框的请求方法*/ 
  51.     function getVals(){ 
  52.         var res = getRadioRes('rds'); 
  53.         if(res == null){ 
  54.             mui.toast('请选择'); 
  55.             return false
  56.         } 
  57.         mui.toast(res); 
  58.     } 
  59.     /*多选框的触发方法*/ 
  60.     function getVal(){ 
  61.         var res = getcheckBoxRes('rdss'); 
  62.         if(res.length < 1){ 
  63.             mui.toast('请选择'); 
  64.             return false
  65.         } 
  66.         mui.toast(res); 
  67.     } 
  68.      
  69.     //封装的方法获取复选款的数据 
  70.     function getRadioRes(className){ 
  71.         var rdsobj = document.getElementsByClassName(className); 
  72.         //alert(rdsobj.length); 
  73.         var checkVal = null
  74.         for(i=0; i<rdsobj.length;i++){ 
  75.             if(rdsobj[i].checked){ 
  76.                 checkVal = rdsobj[i].value; 
  77.             } 
  78.         } 
  79.         return checkVal; 
  80.     } 
  81.      
  82.     //封装的方法 获取多选框的数据 
  83.     function getcheckBoxRes(className){ 
  84.         var rdsobj = document.getElementsByClassName(className); 
  85.         var checkVal = new Array(); 
  86.         var $k = 0; 
  87.         for(i = 0; i<rdsobj.length; i++){ 
  88.             if(rdsobj[i].checked){ 
  89.                 checkVal[$k] = rdsobj[i].value; 
  90.                 $k++; 
  91.             } 
  92.         } 
  93.         return checkVal; 
  94.     } 
  95. </script> 
  96. </html> 

 

相关热词搜索: