radio单选按钮监听事件实现方法 (LayUI)

是在搜索经验的时候，发现很多网友给出的代码有缺失，不适合小白开发

所以，小小整理一番，欢迎指摘 …

操作步骤：

首先 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();
   		 });
    });

好像，大概，也许，差不多就是这样的了 …

Radio Object

Radio 对象代表 HTML 表单中的单选按钮。

在 HTML 表单中 <input type="radio"> 每出现一次，一个 Radio 对象就会被创建。

单选按钮是表示一组互斥选项按钮中的一个。当一个按钮被选中，之前选中的按钮就变为非选中的。

当单选按钮被选中或不选中时，该按钮就会触发 onclick 事件句柄。

您可通过遍历表单的 elements[] 数组来访问 Radio 对象，或者通过使用 document.getElementById()。

Radio 对象属性

W3C: W3C 标准。

属性	描述	W3C
checked	设置或返回单选按钮的状态。	Yes
defaultChecked	返回单选按钮的默认状态。	Yes
disabled	设置或返回是否禁用单选按钮。	Yes
form	返回一个对包含此单选按钮的表单的引用。	Yes
name	设置或返回单选按钮的名称。	Yes
type	返回单选按钮的表单类型。	Yes
value	设置或返回单选按钮的 value 属性的值。	Yes

标准属性和事件

Radio对象同样支持标准的属性和事件。

如您还有不明白的可以在下面与我留言或是与我探讨QQ群308855039，我们一起飞！

<!DOCTYPE html>
<html lang="en">
<head>
 <meta charset="UTF-8">
 <style>
 label{
 margin:5px;
 }
 .input-radio{
 display: none;
 }
 .span-radio{
 display: inline-block;
 border:1px solid #ccc;
 width:16px;
 height: 16px;
 border-radius:2px;
 vertical-align: middle;
 margin-right: 5px;
 position: relative;
 }
 .span-radio:before{
 content: '';
 font-size: 0;
 width: 10px;
 height: 10px;
 background: blue;
 position: absolute;
 left:50%;
 top:50%;
 margin-left: -5px;
 margin-top: -5px;
 border-radius: 2px;
 display: none;
 }
 /* ~代表选择checked的后面的兄弟节点,显示选中背景框*/
 .input-radio:checked~.span-radio:before{
 display: block;
 }
 </style>
</head>
<body>
<label>
 <input type="radio" name="evaluate" id="radio1" class="input-radio">
 <span class="span-radio"></span>优
</label>
<label>
 <input type="radio" name="evaluate" id="radio2" class="input-radio">
 <span class="span-radio"></span>良
</label>
<label>
 <input type="radio" name="evaluate" id="radio3" class="input-radio">
 <span class="span-radio"></span>中
</label>
</body>
</html>

果图

在线咨询

上一篇：HTML代码中的空格和空行
下一篇：css盒模型、元素类型

您的项目需求

*请认真填写需求信息，我们会在24小时内与您取得联系。

整合营销服务商

radio单选按钮监听事件实现方法 (LayUI)

您的项目需求