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

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

操作步骤：

首先 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改变后的状态来判断相应的值是否应该显示或者隐藏。

上代码：
  <el-radio-group v-model="basicData.isDel" @change="changeHandler">
                        <el-radio label="1">已激活</el-radio>
                        <el-radio label="0">未激活</el-radio>
                    </el-radio-group>

  changeHandler(value) {
         this.sure=true 
    },

这样就可以解决了

天做一个数据统计，想实现通过不同的时间纬度来控制统计范围，大概效果图如下：

html 代码 部分

<div class="layui-form-item">
    <label class="layui-form-label" style="width:120px">统计纬度</label>
    <div class="layui-input-inline">
        <input lay-filter="radio1" type="radio"  value="0" title="日" checked>
        <input lay-filter="radio1" type="radio"  value="1" title="月">
    </div>
    <label class="layui-form-label" style="width:95px;">收运时间:</label>
    <div class="layui-input-inline" style="width:300px;" id="timeDiv">
        <input type="text" name="createTime" id="createTime" placeHolder="请选择时间" readonly="true"
               class="layui-input laydate-range">
    </div>
</div>

首先初始化日期控件

layui.use(['laydate', 'form'], function () {
    var form=layui.form, laydate=layui.laydate;
    var stahtml 代码 部分

<div class="layui-form-item">
    <label class="layui-form-label" style="width:120px">统计纬度</label>
    <div class="layui-input-inline">
        <input lay-filter="radio1" type="radio"  value="0" title="日" checked>
        <input lay-filter="radio1" type="radio"  value="1" title="月">
    </div>
    <label class="layui-form-label" style="width:95px;">收运时间:</label>
    <div class="layui-input-inline" style="width:300px;" id="timeDiv">
        <input type="text" name="createTime" id="createTime" placeHolder="请选择时间" readonly="true"
               class="layui-input laydate-range">
    </div>
</div>

rtDate=laydate.render({
        elem: '#createTime',
        type: 'date',
        format: 'yyyy-MM-dd',
        range: true
    });
   });

再写radio的切换监听

form.on('radio(radio1)', function (data) {
    if (data.value==0) {
        startDate.config.type="date"
        startDate.config.format="yyyy-MM-dd"
    } else if(data.value==1) {
        startDate.config.format="yyyy-MM"
        startDate.config.type="month"
    }
});

通过以上的写法会发现startDate.config.type="month"可以正常生效，选择面板也正常地显示为月份选择面板。但是startDate.config.format="yyyy-MM"并没有起作用，也就是说选择完之后日期还是显示成"yyyy-MM-dd"格式，form.render();也无法更改过来。

后面无奈通过了如下方法来实现，直接重新渲染并不能成功，要先删除控制重新插入之后再重新渲染。

form.on('radio(radio1)', function (data) {
    if (data.value==0) {
        $("#createTime").remove();//这是关键
        var html='<input type="text" value="<?=($endDate)?>" name="createTime" id="createTime" placeHolder="请选择时间" readonly="true"\n' +
            '                                       class="layui-input laydate-range">';
        $("#timeDiv").append(html);//这是关键
        laydate.render({
            elem: '#createTime',
            type: 'date',
            format: 'yyyy-MM-dd',
            range: true
        });

    } else {
        $("#createTime").remove();//这是关键
        var html='<input type="text" value="<?=($endDate)?>" name="createTime" id="createTime" placeHolder="请选择时间" readonly="true"\n' +
            '                                       class="layui-input laydate-range">';
        $("#timeDiv").append(html);//这是关键
        startDate=laydate.render({
            elem: '#createTime',
            type: 'month',
            format: 'yyyy-MM',
            range: true
        });
    }
    form.render();
});

layui使用的是比较早的版本

layui2.2.6

可能现在新版已经没有这个问题了，有不足的地方欢迎指正。