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 弹层组件 - 基础参数1
Layui 弹层组件 - 基础参数1
95 0
|
JavaScript
Layui 弹层组件 - 基础参数3
Layui 弹层组件 - 基础参数3
73 0
|
JavaScript
VUE element-ui之el-form表单点击按钮自动增加表单(输入框),可新增删除
VUE element-ui之el-form表单点击按钮自动增加表单(输入框),可新增删除
2123 0
VUE element-ui之el-form表单点击按钮自动增加表单(输入框),可新增删除
|
2月前
|
前端开发 数据安全/隐私保护
【前端web入门第二天】03 表单-下拉菜单 文本域 label标签 按钮 【附注册信息综合案例】
本文档详细介绍了HTML表单的多种元素及其用法,包括下拉菜单(`&lt;select&gt;` 和 `&lt;option&gt;`)、文本域(`&lt;textarea&gt;`)、标签解释(`&lt;label&gt;`)、各类按钮(`&lt;button&gt;`)及表单重置功能、无语义布局标签(`&lt;div&gt;` 和 `&lt;span&gt;`)以及字符实体的应用。此外,还提供了一个完整的注册信息表单案例,涵盖个人信息、教育经历和工作经历等部分,展示了如何综合运用上述元素构建实用的表单。
【前端web入门第二天】03 表单-下拉菜单 文本域 label标签 按钮 【附注册信息综合案例】
|
3月前
|
小程序 JavaScript 索引
|
4月前
|
JavaScript 前端开发
react18【系列实用教程】双向绑定表单 (2024最新版)含受控组件、非受控组件、单行多行输入框 input,下拉选择 select,单选 radio,多选 checkbox,标签 label
react18【系列实用教程】双向绑定表单 (2024最新版)含受控组件、非受控组件、单行多行输入框 input,下拉选择 select,单选 radio,多选 checkbox,标签 label
163 1
layui表单select框同时支持下拉和输入的解决方案
layui表单select框同时支持下拉和输入的解决方案
357 0
|
JavaScript
Layui 弹层组件 - 基础参数4
Layui 弹层组件 - 基础参数4
73 0
Layui 弹层组件 - 基础参数2
Layui 弹层组件 - 基础参数2
63 0
|
JavaScript 索引
Layui 弹层组件 - 基础参数5
Layui 弹层组件 - 基础参数5
193 0