MUI单复选框获取值 列表 按钮

最新推荐文章于 2024-05-11 22:47:01 发布
原创 最新推荐文章于 2024-05-11 22:47:01 发布
· 1k 阅读 · 1 ·
版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。

MUI单复选框获取值 列表 按钮

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
    <title></title>
    <script src="js/mui.min.js"></script>
    <link href="css/mui.min.css" rel="stylesheet"/>
    <script type="text/javascript" charset="utf-8">
       mui.init();
    </script>
</head>
<body>
 <header class="mui-bar mui-bar-nav">
  <a class="mui-active-back mui-icon mui-icon-left-nav mui-pull-left"></a>
  <h1 class="mui-title">经典语录</h1>
 </header>
 <div class="mui-content">
 <!-- 单选框 -->
 <!-- <div class="mui-input-row mui-radio mui-left">
  <label>运动</label>
  <input type="radio" value="运动" name=checkbox  class="rds">
 </div>
 <div class="mui-input-row mui-radio mui-left">
  <label>看书</label>
  <input type="radio" value="看书" name=checkbox class="rds">
 </div>
 <button type="button" onclick="getvals();">获取值</button> -->
 <!-- 复选框 -->
    <div class="mui-input-row mui-checkbox mui-left">
  <label>运动</label>
  <input type="checkbox" value="运动" name=checkbox  class="cek">
 </div>
 <div class="mui-input-row mui-checkbox mui-left">
  <label>看书</label>
  <input type="checkbox" value="看书" name=checkbox class="cek">
 </div>
 <button type="button" onclick="getcekvals();">获取值</button>
    <!-- 数字角标 -->
    <span class="mui-badge mui-badge-primary mui-badge-inverted">5</span>
    <!-- 列表 -->
    <ul class="mui-table-view">
     <li class="mui-table-view-cell mui-collapse">
      <a class="mui-navigate-right" href="#">面板1</a>
          <div class="mui-collapse-content">
        <p>等待不能再等待的等待会等待</p>
       </div>
     </li>
     <li class="mui-table-view-cell mui-collapse">
      <a class="mui-navigate-right" href="#">面板1</a>
          <div class="mui-collapse-content">
        <p>期待不能再期待的期待会期待</p>
       </div>
      
     </li>
     <li class="mui-table-view-cell mui-collapse">
      <a class="mui-navigate-right" href="#">面板1</a>
          <div class="mui-collapse-content">
        <p>等你补充...</p>
       </div>
     </li>
     
    </ul>
    <!-- 按钮 -->
    <!-- 点击按钮  显示menu -->
    <button type="button" class="mui-btn mui-btn-primary" onclick="showMenu();">按钮</button>
    </div>
    <div id="sheet1" class="mui-popover mui-popover-bottom mui-popover-action">
 <ul class="mui-table-view">
  <li class="mui-table-view-cell">
   <a href="#">菜单1</a>
  </li>
  <li class="mui-table-view-cell">
   <a href="#">菜单2</a>
  </li>
 </ul>
 <!-- 取消菜单 -->
    <ul class="mui-table-view">
     <li class="mui-table-view-cell">
      <a href="#sheet1"><b>取消</b></a>
     </li>
    </ul>
    </div>
    <script type="text/javascript">
      function showMenu(){
       mui('#sheet1').popover('toggle');
      }
   
   // 获取单选框按钮值
   // function getvals(){
   //  var res=getRadioRes(res);
   //  if(res==null){
   //   mui.toast('请选择')
   //   return;
   //  }
   //  mui.toast(res)
   // }
   // function getRadioRes(className){
   //   var rdsObj=document.getElementsByClassName('rds')
   //  var checkVall=null;
   //  for (var i = 0; i < rdsObj.length; i++) {
   //   if(rdsObj[i].checked){
   //    checkVall=rdsObj[i].value;
   //   }
   //  }
   //  return checkVall;
   // }
   // 获取复选框按钮值
   function getCheckRes(className){
    var rdsObj=document.getElementsByClassName(className)
    var checkVall=new Array();
    var k=0;
    for (var i = 0; i < rdsObj.length; i++) {
     if(rdsObj[i].checked){
      checkVall[k]=rdsObj[i].value;
      k++;
     }
    }
    return checkVall;
   }
   function getcekvals(){
    var ceks=getCheckRes('cek');
    if(ceks.length<1){
     mui.toast('请选择')
     return;
    }
    mui.toast(ceks)
   }
    </script>
</body>
</html>
他是信仰
关注
HTML应用开发基础篇 - MUI 框架（二）输入控件
徐小mu的博客
01-05 2140
目录 1、输入表单（文本框、密码框、搜索框） 2、数字输入框 3、开关组件 4、MUI 选择器 5、日期选择器 1、输入表单（文本框、密码框、搜索框） 外层容器：class=" mui-input-group " ；内层：行容器 ：class=" mui-input-row " ，输入增强：文本清除 ( class=" mui-input-clear" )，密码查看 ( cl...
mui开发中获取单选按钮、复选框的值(实例讲解)
12-01
js获取单选按钮的值 function getVals(){ var res = getRadioRes('rds'); if(res == null){mui.toast('请选择'); return;} mui.toast(res); } function getRadioRes(className){ var rdsObj = document.getElementsByClassName(className); var checkVal = null; for(i = 0; i < rdsObj.length; i++){ if(rdsObj[i].checked){
mui开发中获取单选按钮、复选框的值
ankexiu3193的博客
07-23 264
js获取单选按钮的值 function getVals(){ var res = getRadioRes('rds'); if(res == null){mui.toast('请选择'); return;} mui.toast(res); } function getRadioRes(className){ var rdsObj = docu...
009-跨平台开发-MUI-复选框及取值（checkbox）
qq_33605778的博客
11-05 2943
视频教程：点击这里认识 checkbox常用于多选的情况，比如批量删除、添加群聊等；DOM结构 <div class="mui-input-row mui-checkbox"> <label>checkbox示例</label> <input name="checkbox1" value="Item 1" type="checkbox" checked> </div> 默认checkbox在
MUI-list（列表），普通列表、带箭头列表、带数字角标列表、带图文列表
LzzMandy的博客
12-17 5727
本文主要介绍list(列表)的几种展现形式：普通列表、带箭头列表、带数字角标列表、带图文列表 效果图如下： 1、普通列表：只需要在ul节点上添加.mui-table-view类、在li节点上添加.mui-table-view-cell类即可 2、带箭头列表：若右侧需要增加导航箭头，变成导航链接，则只需在li节点下增加a子节点，并为该a节点增加.mui-navigate-right类即可 ...
基于jQuery实现复选框是否选中进行答题提示
10-23
在现代Web开发中，jQuery作为一个...为了能够通过jQuery准确地选中这些复选框，并在点击按钮后显示提示信息，我们需要为复选框和按钮设置唯一的ID。例如： ```html <input type="checkbox" id="checkbox01"/>A ...
2018mui教程 mui实战视频教程 web移动端开发教程+源码
12-13
MUI - 复选框、单选框、使用js获取选择值.mp4 MUI - cardview(卡片视图)、mask(遮罩蒙版).mp4 MUI - accordion(折叠面板)、button(按钮).mp4 h.js 使用教程.mp4 MUI - actionsheet(操作表)、badge(数字角标).mp4...
四.MUI - 复选框、单选框、使用js获取选择值
热门推荐
梅某某
04-07 1万+
1、复选框 checkbox常用于多选的情况，比如批量删除、添加等； DOM结构 class="mui-input-row mui-checkbox"> checkbox示例 name="checkbox1" value="Item 1" type="checkbox" checked> 默认checkbox在右侧显示，若希望在左侧显示，只需增加.mui-le
mui如何获取radio和checkbox的值，单选框的男女拿值
最新发布
m0_67468232的博客
05-11 662
【代码】mui如何获取radio和checkbox的值。
mui.css和input type=checkbox冲突，导致打不上勾(无法选中)的解决办法.zip
11-15
mui.css和input type=checkbox冲突，导致打不上勾(无法选中)的解决办法.zip
Mui-js获取单选框值
weixin_30507269的博客
06-23 190
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum...
mui.toast样式风格及位置修改教程
优哉游哉的博客
09-07 4224
使用了mui.toast来实现可自动消失的信息提示效果。但默认的显示效果太差了，很不显示，而且是在底部的。如下图：想改到屏幕的中间位置，再改大一点。但官方并没有相关的文档教程，论坛也没找到相关的教程。只好自己研究，最终发现。消息框的DIV类为<div class="mui-toast-container"> <div class="mui-toast-message"></div> </div>所以
uniapp制作特定的带下拉列表的input输入框
自由&不束缚的博客
03-25 4315
根据项目需求制作特定的input输入框 下面是效果图 以下只放些关键代码 template <view class="item"> <text class="symbol">*</text> <text>系统角色:</text> <view class="input"> <view class="inputStyle" v-if="userFormList.inputRoleList&&userFormL
ant-mobile的Toast的样式修改（react）
weixin_34262482的博客
09-06 1462
最近使用了ant-mobile来作为项目的UI框架。 项目中，点击列表的时候回出现一个提示，这个提示是ant-mobile自带的toast，我们可以直接调用。 toast的提示很多的，我这里只是用的toast.info。 最开始的时候，是这样的。 根据项目的设计UI需要修改其样式，因为这个toast是动态添加，并且会马上消失的，所以页面中根本找不到这个元素。 绞尽脑...
html5 mui 点击行，让checkbox不自动选中
云上人间钦自赏
04-24 4174
找到mui.js，转到5564行，把这个事件注释掉就行了。 看来api还是要仔细研究下的。
mui中复选框的checked问题
haoranhaoshi的博客
02-02 1047
document.getElementById("noSkill").checked = true; mui("#noSkill").checked = true; 第一行可以成功，第二行不可以成功，mui的标签获取后的可操作范围没有原生的广，有待扩展。 ...
html单选框中写三目表达式,MUI - 复选框、单选框、使用js获取选择值
weixin_39679061的博客
06-02 492
mui.init();hello12运动篮球获取复选框的值运动篮球获取多选框的值/*复选框的请求方法*/function getVals(){var res = getRadioRes('rds');if(res == null){mui.toast('请选择');return false;}mui.toast(res);}/*多选框的触发方法*/function getVal(){var res...
使用CSS3实现iOS风格的复选框与开关按钮
"本文主要介绍如何使用CSS3技术来创建具有iOS风格的复选框（checkbox）和开关按钮（switch）。这些元素适用于移动端界面设计，提供了多种状态和样式选择，包括默认选中、未选中、自定义颜色以及禁用状态。" 在Web...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值