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

在layui近期的开发中,遇到一则需求:设备的故障原因明确,点选即可,但是又需要维修人员将该原因自动输入到文本框进行记录。
同样的事情,做两遍,对操作人员来说是不友好的,何况又是在手机端使用的情况,如果解决不重复劳动,不给维修人员增加麻烦,减少打字环节呢?

layui内部表单互动的实战案例:根据radio单选框自动改变input内容_第1张图片

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 !

你可能感兴趣的:(layui)