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 !

  • 1
    点赞
  • 2
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

漏刻有时

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值