分享个radio的单选组件编辑页选中状态的处理方案

起因：使用了webman-admin表单构建工具做了个单选组件后发现新增正常的，而编辑时发现无法根据表中的值进行同步checked。

解决过程

先查看了下update页生成的代码，表单初始化化时会将拿到的数据根据那么进行val赋值。
而我们的radio组件每一个name都是一致的，很可能都会赋值为表中的值。
新增了一条后，数据库back_button字段的vlaue为2。
进行控制台打印，果然4条input的value全部为2。
这就好办了，因为刚好我的value就是0,1,2,3这样，刚好和数组默认下标一致。
拿到随便拿到一个input的value，这里用的0

                    // 获取所有的input
                    let back_buttons = layui.$("input[name='back_button']");
                    // 拿到第一个的value
                    value = parseInt(back_buttons[0].value);

然后将数组中的下标为value值的input添加 checked选中状态

back_buttons.eq(value).prop("checked", true);

之后通过for循环，将4个input中的value值还原为0,1,2,3。

                    // 还原value值
                    for(let i = 0; i < back_buttons.length; i++){
                        back_buttons[i].value = i;
                    }
                    // 重新渲染
                    layui.form.render();

最后加一条监听radio选中状态

                    //  监听radio选中状态
                    layui.form.on("radio(back_button)", function (data) {
                        layui.$('input[name="back_button"]').val(data.value);
                    });

因为对layui不是太熟，还是用原生js的思路处理，如果有更优雅或者已经封装好的方式请留言指教。

下面贴下全部代码

html代码

            <div class="layui-form-item">
                <label class="layui-form-label">返回按钮</label>
                <div class="layui-input-block">
                    <input type="radio" name="back_button" value="0" title="隐藏" class="layui-input">
                    <input type="radio" name="back_button" value="1" title="H5" class="layui-input">
                    <input type="radio" name="back_button" value="2" title="返回链接" class="layui-input">
                    <input type="radio" name="back_button" value="3" title="自定义" class="layui-input">
                </div>
            </div>

js代码

                // 字段 返回按钮 back_button
                layui.use(['form'], function () {
                    // 获取所有的input
                    let back_buttons = layui.$("input[name='back_button']");
                    // 拿到第一个的value
                    value = parseInt(back_buttons[0].value);
                    // 设置顺讯为value值的input为checked状态
                    back_buttons.eq(value).prop("checked", true);
                    // 还原value值
                    for(let i = 0; i < back_buttons.length; i++){
                        back_buttons[i].value = i;
                    }
                    // 重新渲染
                    layui.form.render();
                    //  监听radio选中状态
                    layui.form.on("radio(back_button)", function (data) {
                        layui.$('input[name="back_button"]').val(data.value);
                    });
                });