layui是国内一款界面比较整洁大方的ui框架,里面封装了很多前端开发常用的组件,通常我们直接过去就可以实现效果,可以提高我们的开发效率。使用步骤:
1、下载layui:https://www.layui.com
2、将layui文件夹复制到自己的项目里:3、在html页面引入相关的css和js:
<link rel="stylesheet" type="text/css" href="/layui/css/layui.css" rel="external nofollow" media="all"> //路径仅供参考
<script type="text/javascript" src=...
若是只引用jquery的话,监听单选按钮改变事件如下:
<input type="radio" name="sex" checked="checked" value="1">男
<input type="radio" name="sex" value="2">女
$(document).ready(function() { $(input[type=radio][name=sex]).change(function() {if (this.value == 1) { alert("这是个男孩"); } else if (this.value == 2) { alert("这是个女孩"); } });
});注意:如果是引用了layui的样式和方法,则上面的监听事件失效,...
废话不多说,大家来看吧!<button class="layui-btn layui-btn-radius" layadmin-event="edit"><i class="layui-icon"></i>编辑</button>点击编辑取消disabled
$(function(){$("input").attr("disabled",true);$("textarea").attr("disabled",true);$("select").attr("disabled",true);$("#buttons").hide()})//可以编辑admin.events.edit = function(){$("input").removeAttr("disabled");$("textarea").removeAttr("disabled")...
最近一直在使用layui,一个对程序员相对友好的前端框架,很多效果都进行了初步的封装。
在使用过程中遇到最多的问题就是引用的问题,各种模板无法使用,虽然都一一百度解决。
本次需要解决的问题是 layui-form表单无法渲染效果。
我希望的效果是但是程序运行效果是问题分析:
因为这个表单,我是使用laytpl动态插入的,因此表单中radio的效果并没有渲染上,打开调试模式可以看到
正常的radio渲染结果,应该是包括一个i标签和一个sp...
如下所示:前端代码
<link rel="stylesheet" href="/static/index/layui/css/layui.css" rel="external nofollow" >
<script type="text/javascript" src="/static/index/layui/layui.js" charset="utf-8"></script>
<script type="text/javascript" src="/static/index/js/jquery-3.3.1.min.js" charset="utf-8"></script>
<form class="layui-form" action=""><div class="layui-form-item"><label class="layui-form-label" sty...
情景描述
Layui数据表格中用到了表单元素radio,在当前页面选中radio状态,并同步更新到保存表格中所有的数据的数组中(获取表格中的所有数据并保存到数组中),再点击分页组件中的下一页、上一页、跳转按钮进行切换另外一个页面,然后在切换回之前的页面,会发现在以前页面上radio状态全部恢复默认了,我们当然是希望能保存住前一页radio的选中状态。
我写项目遇到的一个的情况:在第一页选中的radio的状态,点击下一页按钮切换到...
HTML表单:
<div class="layui-form-item"><label class="layui-form-label">消息通知</label><div class="layui-input-block"><input name="is_notice" value="1" type="radio" title="通知" checked=""><input name="is_notice" value="0" type="radio" title="不通知"></div>
</div>JS用ajax去后端取回数据:
$.get( "{:url(user/xxxx)}",{id:adminId},function(d){//设置是否通知if(d.is_notice == 0){$("input[name=is_notice...
本demo的效果是单选框一有a和b两个选项按钮,单选框二有q和w两个选项按钮,
选中a,使得q不可选,w选中;选中b,使得w不可选,q选中
下面是完整的代码,需要引入layui.js,layui.css
<!DOCTYPE html>
<html>
<head> <meta charset="utf-8"> <title>layui</title> <meta name="renderer" content="webkit"> <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"> <meta name="viewport" content="width=device-widt...
勾选
form.on(radio(yesHave), function (data) {$("input[name=hasPrepaidVoucher][title=有]").attr(checked,true);form.render();
});取消勾选
form.on(radio(noIssuer), function (data) {debugger;$("input[name=voucherIssuer]").removeAttr(checked);form.render();
});
以上这篇layui中使用jquery控制radio选中事件的示例代码就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持脚本之家。
Html
<div class="layui-inline"><label class="layui-form-label">性别</label><div class="layui-input-block"><input type="radio" name="sex" id="sex" value="1" title="男" ><input type="radio" name="sex" id="sex" value="2" title="女"> </div></div>
JSlayui.use(form, function () {var $ = layui.jquery, form = layui.form;$.ajax({type: "post",url: "/Shared/GetPiDate",data: {},async: true,dataType:...
需求如下图:想要选中单选框3,是单选框3下的复选框全选如果 面板信息 不多的话,可以给每个单选框3添加一个固定的监听事件但是实际项目中,不仅仅只有两个,会有几十个,这时总不能绑定一个lay-filter,添加一个form.on(radio(filter))事件吧所以在此写了一个通用的监听多个radio的方法:// 选取“单选框3”,“单选框3”下的所有内容全选var flagID = document.querySelectorAll("input[title=单选框3]");var aFlagID = new Arra...