layer单选框 radio的问题总结
放官方文档:
位置 页面元素-表单;内置模块-表单
属性title可自定义文本
属性disabled开启禁用
设置value="xxx"可自定义值,否则选中时返回的就是默认的on
radio单选框被点击时触发,回调函数返回一个object参数,并携带两个成员:
data.elem radio原始DOM对象
data.value 被点击的radio的value值
官网文档太简洁了,以至于在实际碰到问题时,明明可以一个小时解决,最后却要花费两三个小时,其实说到底还是菜如狗罢了。
在layer渲染过type为radio的input后,会在原始input元素的后面追加一个div,div的内容如下:
<div class="layui-unselect layui-form-radio layui-form-radioed">
<i class="layui-anim layui-icon"></i>
<div>input的title值</div>
</div>
1.获取所选中的单选框的对象和value值
一般情况下,input框有一个id,然后直接找到下一个元素就是当前展示出来的那个div对象了。
即:$("#inputId").next();
input框中添加lay-filter="xxx",即带有lay-filter的input都在渲染范围之内,根据filter的值来区分不同的单选框
var val = $("input[name='xxx']:checked").val()
val即是所选中的框的value值。可在页面初始化时获取,并在获取后进行下一步操作。
2.控制多选框的点击事件(事件监听)
语法:
form.on('event(过滤器值)', callback);
form模块在layui事件机制中注册了专属事件,所以当你使用layui.onevent(自定义模块事件时,请勿占用form名。
form支持的事件有:select; checkbox; switch; radio; submit
默认监听的是所有form模块元素,但一般都不会这么干,所以这里需要用到filter过滤
其实这个事件监听就相当于我们的点击事件
form.on('select(test)', function(data){
console.log(data);
});
更新渲染:
页面加载时,layer将该渲染的元素全部渲染一遍。但有时候数据是动态操作的,需要执行更新渲染才可以
form.render(type, filter)
type :可选。表单的type,如果不选择,则对全部类型的表单刷新一次
可选择的type值:
select 下拉选;
checkbox 多选框(含开关);
radio 单选框。例:
form.render('select');
filter :即class="layui-form" 所在元素的lay-filter=“”的值,说白了这个值就是相同的一个或多个input的lay-filter的值,由这个filter值来控制元素的渲染范围
例:
form.render(null, 'test')或form.render('test') //重新渲染lay-filter值为test的所有元素的全部状态(包含select、checkbox和radio)
form.render('select', 'test1') //重新渲染lay-filter值为test1的所有元素的select状态
注:一般在同一个元素上放置多种状态的挺少的,起码我还没碰到过,所以一般一个元素只放一个状态(即一种框)。等碰到了再回来补
layer单选框 radio的问题总结的更多相关文章
- 吾八哥学Selenium(三):操作复选框checkbox/单选框radio的方法
复选框checkbox和单选框radio是web网站里经常会使用到的两个控件,那么在web自动化测试的时候如何利用Selenium来操作这俩控件呢?今天我们就来简单入门练习一下! html测试页面代码 ...
- MFC学习单选框Radio使用
创建单选框Radio ,ID号IDC_RADIO_NAME 1.获取单选框内容 int RadioState = ((CButton *)GetDlgItem(IDC_RADIO_NAME))-> ...
- 自定义单选框radio样式
<!doctype html> <html> <head> <meta charset="utf-8"> <title> ...
- jquery单选框radio绑定click事件实现和是否选中的方法
使用jquery获取radio的值,最重要的是掌握jquery选择器的使用,在一个表单中我们通常是要获取被选中的那个radio项的值,所以要加checked来筛选,比如有以下的一些radio项: 1. ...
- 单选框radio总结(获取值、设置默认选中值、样式)
单选框 radio <div class="radio-inline"> <input type="radio" name="kil ...
- jquery单选框radio绑定click事件实现方法
本文实例讲述了jquery单选框radio绑定click事件实现方法.分享给大家供大家参考. 具体实现方法如下: 复制代码代码如下: <html><head><title ...
- 单选框radio改变事件详解(用的jquery的radio的change事件)
单选框radio改变事件详解(用的jquery的radio的change事件) 一.总结 1.用的jquery的radio的change事件:当元素的值发生改变时,会发生 change 事件,radi ...
- 微信小程序:单选框radio和复选框CheckBox
单选框radio: 可以通过color属性来修改颜色. 复选框checkbox:
- Js、layui获取单选框radio的几种方法
首先,编写HTML如下: <form id="form1"> <table border="0"> ...
随机推荐
- MVC和MVP区别
从这幅图可以看到,我们可以看到在MVC里,View是可以直接访问Model的!从而,View里会包含Model信息,不可避免的还要包括一些业务逻辑. 在MVC模型里,更关注的Model的不变,而同时有 ...
- Collapse 折叠面板
通过折叠面板收纳内容区域 基础用法 可同时展开多个面板,面板之间不影响 <el-collapse v-model="activeNames" @change="ha ...
- kubernetes学习:CKA考试题
1. 列出环境内所有的pv 并以 name字段排序(使用kubectl自带排序功能) kubectl get pv --sort-by=.metadata.name 2. 列出指定pod的日志中状态为 ...
- 自由度为n的卡方分布χ²(n)的期望等于n、方差等于2n的证明
出自:http://blog.sina.com.cn/s/blog_4cb6ee6c0102xh17.html
- Python爬虫学习==>第六章:爬虫的基本原理
学习目的: 掌握爬虫相关的基本概念 正式步骤 Step1:什么是爬虫 请求网站并提取数据的自动化程序 Step2:爬虫的基本流程 Step3:Request和Response 1.request 2. ...
- 深入源码分析Spring中的构造器注入
# 1. 示例 构造器注入类,分别有三个构造器,一个是无参构造器,一个是注入一个Bean的构造器,一个是注入两个Bean的构造器: public class ConstructorAutowiredT ...
- PJzhang:从js文件中寻找子域名的SubDomainizer
猫宁!!! 有些专门针对企业客户的网站,可能没有供公开注册的页面,但是在js文件中可能会隐藏他们的注册接口,当然这也是一种安全风险,就像有些后台是一定不能不小心放外网一个道理. 最近看到一篇文章提 ...
- mysql命令行备份方法
一.mysql备份 1.备份命令 格式:mysqldump -h主机IP -P端口 -u用户名 -p密码 --database 数据库名 > 文件名.sql # 本地备份可以不添加端口和主机IP ...
- KVM虚拟化网络管理(4)
一.Linux Bridge网桥管理 网络虚拟化是虚拟化技术中最复杂的部分,也是非常重要的资源.第一节中我们创建了一个名为br0的linux-bridge网桥,如果在此网桥上新建一台vm,如下图: V ...
- 非常好的一个JS代码(RelativePosition.js)
var RelativePosition = function(){ function getLeft( align, rect, rel ){ var iLeft = 0; switch (alig ...