放官方文档:

位置 页面元素-表单;内置模块-表单
属性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的问题总结的更多相关文章

  1. 吾八哥学Selenium(三):操作复选框checkbox/单选框radio的方法

    复选框checkbox和单选框radio是web网站里经常会使用到的两个控件,那么在web自动化测试的时候如何利用Selenium来操作这俩控件呢?今天我们就来简单入门练习一下! html测试页面代码 ...

  2. MFC学习单选框Radio使用

    创建单选框Radio ,ID号IDC_RADIO_NAME 1.获取单选框内容 int RadioState = ((CButton *)GetDlgItem(IDC_RADIO_NAME))-> ...

  3. 自定义单选框radio样式

    <!doctype html> <html> <head> <meta charset="utf-8"> <title> ...

  4. jquery单选框radio绑定click事件实现和是否选中的方法

    使用jquery获取radio的值,最重要的是掌握jquery选择器的使用,在一个表单中我们通常是要获取被选中的那个radio项的值,所以要加checked来筛选,比如有以下的一些radio项: 1. ...

  5. 单选框radio总结(获取值、设置默认选中值、样式)

    单选框 radio <div class="radio-inline"> <input type="radio" name="kil ...

  6. jquery单选框radio绑定click事件实现方法

    本文实例讲述了jquery单选框radio绑定click事件实现方法.分享给大家供大家参考. 具体实现方法如下: 复制代码代码如下: <html><head><title ...

  7. 单选框radio改变事件详解(用的jquery的radio的change事件)

    单选框radio改变事件详解(用的jquery的radio的change事件) 一.总结 1.用的jquery的radio的change事件:当元素的值发生改变时,会发生 change 事件,radi ...

  8. 微信小程序:单选框radio和复选框CheckBox

    单选框radio: 可以通过color属性来修改颜色. 复选框checkbox:

  9. Js、layui获取单选框radio的几种方法

    首先,编写HTML如下:   <form id="form1">         <table  border="0">        ...

随机推荐

  1. LC 889. Construct Binary Tree from Preorder and Postorder Traversal

    Return any binary tree that matches the given preorder and postorder traversals. Values in the trave ...

  2. 给定一个字符串,把字符串内的字母转换成该字母的下一个字母,a换成b,z换成a,Z换成A,如aBf转换成bCg, 字符串内的其他字符不改变,给定函数,编写函数 void Stringchang(const char*input,char*output)其中input是输入字符串,output是输出字符串

    import java.util.Scanner; /*** * 1. 给定一个字符串,把字符串内的字母转换成该字母的下一个字母,a换成b,z换成a,Z换成A,如aBf转换成bCg, 字符串内的其他字 ...

  3. 20 Django REST Framework 更改PUT/PATCH/DELETE的传参字段,默认为pk

    01-lookup_field 默认为 lookup_field='pk' 更改后的效果:

  4. 如何用 putty 连接远程 Linux 系统

    如何用 putty 连接远程 Linux 系统 Putty 简介 Putty 是一个免费的.Windows x86 平台下的 Telnet.SSH 和 Rlogin 客户端,但是功能丝毫不逊色于商业的 ...

  5. debian中安装gcc make

    ubuntu debian 可以直接 apt-get install gcc automake autoconf libtool make

  6. 虚拟机安装: vmware + ubuntu16.04

    参考博客:https://blog.csdn.net/qq1326702940/article/details/82322079 这个博客讲的很详细,只要ubuntu版本相同,应该是一模一样. 注意点 ...

  7. pandas中.value_counts()用于统计数据集中的某一列

    value_counts()是一种查看表格某列中有多少个不同值的快捷方法,并计算每个不同值有在该列中有多少重复值.value_counts()是Series拥有的方法,一般在DataFrame中使用时 ...

  8. elastic 查询案例Query与Filter + CRUD简单理解 + dynamic mapping + keyword

    1.增 PUT mytest01/external/ { "name": "xiaowei" } curl -XPUT '192.168.1.49:9200/m ...

  9. (5.9)mysql高可用系列——正常主从切换测试

    [0]实验环境 操作系统:CentOS linux 7.5 数据库版本:5.7.24 数据库架构:主从复制,主库用于生产,从库用于数据容灾和主库备机,采用默认传统的异步复制. 主库IP:192.168 ...

  10. selenium爬虫后上传数据库。

    一.准备工作 1.1安装软件 安装python.安装谷歌浏览器.将chromedriver.exe放到指定位置.放到Scripts文件夹中.我这边的路径为:C:\Users\1\AppData\Loc ...