网站首页 > 知识剖析 正文
但是在搜索经验的时候,发现很多网友给出的代码有缺失,不适合小白开发
所以,小小整理一番,欢迎指摘 …
操作步骤:
首先 html 设计效果如下:
对应的源码为:
<div class="layui-form-item">
<label class="layui-form-label">主题类型:</label>
<div class="layui-input-inline" style="width: 660px">
<input type="radio" name="level" lay-filter="levelM" value="1" title="一级分类" {$theme.level=="1"?"checked":""}>
<input type="radio" name="level" lay-filter="levelM" value="2" title="二级分类" {$theme.level=="2"?"checked":""}>
<input type="radio" name="level" lay-filter="levelM" value="3" title="三级分类" {$theme.level=="3"?"checked":""}>
</div>
</div>
【注】:
注意上述源码总的 "lay-filter" 属性;
此处需要填写一个用于区分监听事件的名称,我定为:"levelM"
因为鄙人在进行 ThinkPHP 框架代码开发,所以其中牵扯到了部分内置代码,可自行忽略
然后就是 JavaScript 代码的编写,完整的代码如下:
layui.use(['form'], function () {
var upload = layui.upload;
var form = layui.form;
//此处即为 radio 的监听事件
form.on('radio(levelM)', function(data){
console.log(data.elem); //得到radio原始DOM对象
console.log(data.value); //被点击的radio的value值
var level = data.value;//被点击的radio的value值
$(".sel-parent-msg").hide();
$(".sel-parent-msg-"+level).show();
});
});
好像,大概,也许,差不多就是这样的了 …
猜你喜欢
- 2025-01-21 谷歌挖出 iPhone 重大漏洞!利用 AirDrop 底层协议,无需接触即可控制手机
- 2025-01-21 TuneIn Radio
- 2025-01-21 银河系中心黑洞照片的背后,有一个困扰了天文学家90年的谜
- 2025-01-21 前端入门——html 表单
- 2025-01-21 HTML 标签
- 2025-01-21 喜讯!宝鸡人民广播电台广播剧《金钥匙》登上中央台
- 2025-01-21 广播剧《金钥匙》联播
- 2025-01-21 [TFBOYS][置顶]160130 “Music Radio音乐之声”投票教程
- 2025-01-21 让无线电信号拐弯,水滴天线透镜通过其弯曲形状引导无线电波能量
- 最近发表
- 标签列表
-
- xml (46)
- css animation (57)
- array_slice (60)
- htmlspecialchars (54)
- position: absolute (54)
- datediff函数 (47)
- array_pop (49)
- jsmap (52)
- toggleclass (43)
- console.time (63)
- .sql (41)
- ahref (40)
- js json.parse (59)
- html复选框 (60)
- css 透明 (44)
- css 颜色 (47)
- php replace (41)
- css nth-child (48)
- min-height (40)
- xml schema (44)
- css 最后一个元素 (46)
- location.origin (44)
- table border (49)
- html tr (40)
- video controls (49)