Layui 记录。

Layui 记录。

功能说明

现在要实现，点击单选按钮“是”,将隐藏的文本框或者上传文件组件显示出来。

静态页面代码

注释：Layui的资源引入，这里就不在说明了，不会引入的可以看看Layui的官方技术文档
Layui技术文档地址

<form class="layui-form layui-form-pane" action=""  >
	<div class="layui-form-item">
        <div class="layui-form-label ">作战半径</div>
        <div class="layui-input-block showRadius" >
            <input type="radio" name="inOrOutFlg" lay-filter="inOrOutFlg0" value="0" title="是">
            <input type="radio" name="inOrOutFlg" lay-filter="inOrOutFlg1" value="1" title="否" checked>
        </div>
    </div>
    <div class="layui-form-item" id="showRadiusVal"  hidden>
        <div class="layui-inline">
            <label class="layui-form-label">作战半径</label>
            <div class="layui-input-inline">
                <input type="text" name="radiusVal" placeholder="请输入作战半径" autocomplete="off" class="layui-input" value="">
            </div>
            <label class="layui-form-label" >作战高度</label>
            <div class="layui-input-inline">
                <input type="text" name="heightVal" lay-verify="heightVal" placeholder="请输入作战高度" autocomplete="off" class="layui-input" value="">
            </div>
        </div>
    </div>
    <div class="layui-form-item">
       <div class="layui-input-block">
            <button type="submit" class="layui-btn" lay-submit="" lay-filter="submit">保存</button>
            <button  class="layui-btn layui-btn-primary" id="btn_cancel">返回</button>
        </div>
    </div>
</form>

这个地方我们只是用了css的样式。在初始化加载的时候。把作战半径给隐藏了起来。之后我们就用JS来实现点击单选按钮【是】或【否】的时候动态的显示作战半径，这个地方可以用两个办法来实现，

1、JS的点击事件来动态的实现，

2、使用Layui的按钮监听事件，我这里用了第二种方法，

注释：应该还有其他的更多方法，只是我还没有想到，有大神可以指点一二。共同进步。

layui.use(['table','laypage', 'layer','laydate','tree','upload'], function(){
	/**
    * 点击选中，显示作战半径
    * 注意：inOrOutFlg0，这个是单选按钮lay-filter="inOrOutFlg0"中的值，
     */
    form.on('radio(inOrOutFlg0)', function(data){
        $("#showRadiusVal").show();
        $(".operation_info_model input[name=inOrOutFlg]").val("0")
        //记得要重新加载一下，官方说：需要的地方要重写渲染一下。
        //没有这个东西。有些时候，会不起作用
        form.render();
    });
    form.on('radio(inOrOutFlg1)', function(data){
        $("#showRadiusVal").hide();
        $(".operation_info_model input[name=inOrOutFlg]").val("1")
        form.render();
    });

});
	

附带一个小说明，在做编辑回显的时候可以这么写。

layui.use(['table','laypage', 'layer','laydate','tree','upload'], function(){
	table.on('tool(info_model_table)',function (obj) {
		switch (obj.event) {
			case 'edit':
			//在编辑回显的时候，可以这么弄。
				$(".showRadius :radio[name='inOrOutFlg'][value='" + data.inOrOutFlg + "']").prop("checked", "checked");
                if (data.inOrOutFlg == 0){
                    $(".operation_info_model input[name=inOrOutFlg]").attr('checked', 'checked');
                    $("#showRadiusVal").show();
                    $(".operation_info_model input[name=radiusVal]").val(data.radiusVal);
                    $(".operation_info_model input[name=heightVal]").val(data.heightVal);
                    form.render("radio");
                }else{
                    $("#showRadiusVal").hide();
                }
				form.render();
				break;
		}

	})

});