放官方文档:

位置 页面元素-表单;内置模块-表单
属性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. Tensorflow的gRPC编程(一)

    https://blog.csdn.net/langb2014/article/details/69559182 如何用TF Serving部署TensorFlow模型 https://www.jia ...

  2. PreparedStatement执行sql語句

    import com.loaderman.util.JdbcUtil; import java.sql.Connection; import java.sql.PreparedStatement; i ...

  3. MEF等Ioc框架引起内存泄露-PartCreationPolicy

    对象的创建可以使用new,也可以使用IOC架如:castle.MEF等,IOC创建的对象的生命周期,可能IOC负责管理,使用框架的开发者如果不弄清楚可能会造成内存泄露问题. 这些内存泄露问题并不是IO ...

  4. 关于ansbile

    YAML语法规则 规则一:缩进(一个缩进两空格,注意一定不用tab) 规则二:冒号(每个冒号后一定要有空格) 规则三:短横线 - (短横线后面要空格) 编写案例 ansible-playbook -- ...

  5. http常见状态码分析

    200:这个是最常见的http状态码,表示服务器已经成功接受请求,并将返回客户端所请求的最终结果 301:客户端请求的网页已经永久移动到新的位置,当链接发生变化时,返回301代码告诉客户端链接的变化, ...

  6. MySQL操作符与相关函数

    union(联合)union使用是关联两张表或者两个查询所查出来的数据,联合成一张表但不会出现重复数据,显示的字段必须匹配列数. select s3.id cid,s1.cityName provin ...

  7. java文件分片上传,断点续传

    百度的webUploader的前端开源插件实现的大文件分片上传功能 前端部分 前端页面代码如下,只需要修改自己的文件上传地址接口地址: <!DOCTYPE html> <html l ...

  8. 认识Redis持久化

    一:为什么需要持久化 因为Redis是一个完全使用内存来存储数据的数据库,如果机器突然断电.服务器重启或进程挂掉了等等原因,那么存储在Redis中的数据就会丢失,从而引起业务的损失.为了保证存储在内存 ...

  9. Android开发 互相调用模式之C#主导

    首先明确一个概念,当我们不使用Android Studio提供的那些包,仅仅是Unity打包apk,打包出来的apk里面也包含了SDK (1)首先删除Unity下我们创建的Plugins文件夹,因为这 ...

  10. 再谈Java数据结构—分析底层实现与应用注意事项

    在回顾js数据结构,写<再谈js对象数据结构底层实现原理-object array map set>系列的时候,在来整理下java的数据结构. java把内存分两种:一种是栈内存,另一种是 ...