layui内部表单互动的实战案例:根据radio单选框自动改变input内容

简介: layui内部表单互动的实战案例:根据radio单选框自动改变input内容

layui近期的开发中,遇到一则需求:设备的故障原因明确,点选即可,但是又需要维修人员将该原因自动输入到文本框进行记录。

同样的事情,做两遍,对操作人员来说是不友好的,何况又是在手机端使用的情况,如果解决不重复劳动,不给维修人员增加麻烦,减少打字环节呢?


HTML代码

<div class="weui-cells weui-cells_form">
        <div class="weui-cell">
            <div class="weui-cell__hd"><label class="weui-label">点位重启</label></div>
            <div class="weui-cell__bd">
                <input type="radio" name="poi_restart" lay-filter="poi_restart" value="1" title="是">
                <input type="radio" name="poi_restart" lay-filter="poi_restart" value="0" title="否" checked>
            </div>
        </div>
        <div class="weui-cell">
            <div class="weui-cell__hd"><label class="weui-label">无主电源</label></div>
            <div class="weui-cell__bd">
                <input type="radio" name="poi_noelectricity" lay-filter="poi_noelectricity" value="1" title="是">
                <input type="radio" name="poi_noelectricity" lay-filter="poi_noelectricity" value="0" title="否" checked>
            </div>
        </div>
        <div class="weui-cell">
            <div class="weui-cell__hd"><label class="weui-label">无光信号</label></div>
            <div class="weui-cell__bd">
                <input type="radio" name="poi_nolight" lay-filter="poi_nolight" value="1" title="是">
                <input type="radio" name="poi_nolight" lay-filter="poi_nolight" value="0" title="否" checked>
            </div>
        </div>
        <div class="weui-media-box weui-media-box_text">
            <p class="weui-media-box__desc" style="margin-bottom: 10px;">维修描述</p>
            <div class="weui-media-box__title">
                <input class="weui-input" type="text" name="poi_md" id="poi_md"/>
            </div>
        </div>
    </div>


layUI交互代码

  /*单选自动输入事件*/
        var ele = document.getElementById("poi_md");
        /*01.重启*/
        form.on("radio(poi_restart)", function (data) {
            //console.log(data.value);
            var thisValue=data.value;
            if (thisValue == '1') {
                var a = ele.value + "重启,";
                $("#poi_md").val(a);
            } else{
                var b = ele.value.replace('重启,','');
                $("#poi_md").val(b);
            }
        });
        /*02.主电源*/
        form.on("radio(poi_noelectricity)", function (data) {
            var thisValue=data.value;
            if (thisValue == '1') {
                var a = ele.value + "无主电源,";
                $("#poi_md").val(a);
            } else{
                var b = ele.value.replace('无主电源,','');
                $("#poi_md").val(b);
            }
        });
        /*03.无光信号*/
        form.on("radio(poi_nolight)", function (data) {
            var thisValue=data.value;
            if (thisValue == '1') {
                var a = ele.value + "无光信号,";
                $("#poi_md").val(a);
            } else{
                var b = ele.value.replace('无光信号,','');
                $("#poi_md").val(b);
            }
        });


lockdatav Done !

相关文章
|
JavaScript
Layui 弹层组件 - 基础参数3
Layui 弹层组件 - 基础参数3
80 0
|
JavaScript 前端开发
Layui 弹层组件 - 基础参数1
Layui 弹层组件 - 基础参数1
99 0
|
4月前
|
小程序 JavaScript 索引
|
5月前
|
JavaScript 前端开发
react18【系列实用教程】双向绑定表单 (2024最新版)含受控组件、非受控组件、单行多行输入框 input,下拉选择 select,单选 radio,多选 checkbox,标签 label
react18【系列实用教程】双向绑定表单 (2024最新版)含受控组件、非受控组件、单行多行输入框 input,下拉选择 select,单选 radio,多选 checkbox,标签 label
188 1
|
7月前
|
前端开发
前端知识笔记(一)———button的type属性
前端知识笔记(一)———button的type属性
439 0
layui框架实战案例(4):因内容安全策略导致弹出层模态框无法正常显示微信公众号文章使用window.open的解决方案
layui框架实战案例(4):因内容安全策略导致弹出层模态框无法正常显示微信公众号文章使用window.open的解决方案
132 1
|
JavaScript PHP 数据库
layui框架实战案例(18):保存草稿和单选radio复选框checkbox无focus属性快速聚焦跳转的解决方案
layui框架实战案例(18):保存草稿和单选radio复选框checkbox无focus属性快速聚焦跳转的解决方案
271 0
Element-ui中 表单(Form)校验的几种形式 及 表单嵌套表格含上传(Upload)组件的综合案例
Element-ui中 表单(Form)校验的几种形式 及 表单嵌套表格含上传(Upload)组件的综合案例
1010 0
|
前端开发
前端工作总结149-封装一个带有对话框的button组件
前端工作总结149-封装一个带有对话框的button组件
103 0