单选按钮、复选框的数据回填_el-radio-button value-CSDN博客

本文链接：https://blog.csdn.net/qq_63173180/article/details/125086977

记录一些容易忘记的东西

使用单选按钮的checked属性可以预先选中，所以回填数据时只需要判断后台传递的数据中关于单选按钮的消息，然后再判断一下，为相应的按钮设置该属性就可以了
```
if (v.ruleForm.sex === '1') {
    $("#man").attr("checked", "checked");
}else {
    $("#female").attr("checked", "checked");
}
```
以下为完整的代码

<!DOCTYPE html>
<html lang="ch">
<head>
    <meta charset="UTF-8">
    <title>注册</title>
    <script src="../static/js/vue.js"></script>
    <script src="https://code.jquery.com/jquery-1.12.4.min.js"></script>
    <script>
        $(function (){
            let v = new Vue({
                el:"#register",
                data:{
                    ruleForm:{
                        name:"",
                        username:"",
                        password:"",
                        phone:"",
                        sex:"",
                    }
                }
            });
            /* 获取当前页面的地址 */
            let href = location.href;
            // alert(href);
            console.log(href);
            /* 截取传递的参数 */
            let s1 = href.substring(href.indexOf("=")+1);
            console.log(s1+"=s1");
            /*  */
            /**
             * 判断 s1 是否是可转数字
             * 可以辨别是点击增加员工还是编辑进入
             * @type {boolean}
             */
            let t = isNaN(Number(s1));
            if (!t) {
                // console.log(t);
                $.ajax({
                    url: "/employee/editor",
                    data: {id: s1},
                    success(data) {
                        // alert("连接成功");
                        console.log(data);
                        v.ruleForm.name = data.name;
                        v.ruleForm.username = data.username;
                        v.ruleForm.password = data.password;
                        v.ruleForm.phone = data.phone;
                        v.ruleForm.sex = data.sex;
                        /* 单选按钮的数据回填 */
                        if (v.ruleForm.sex === '1') {
                            $("#man").attr("checked", "checked");
                        }else {
                            $("#female").attr("checked", "checked");
                        }
                    },
                    error() {
                        console.log("修改连接异常");
                        alert("连接失败");
                    }
                });
            }
        });
    </script>
</head>
<body>
<div id="register" ><!--v-model="ruseForm"-->
    <form action="/employee/registered" method="post" id="dialog-from-label">
        <table>
            <tr>
                <td><label for="user-name-label">姓名：</label></td>
                <td><input name="name" id="user-name-label" type="text" value="mo" v-model="ruleForm.name"></td>
                <td><span id="name-span" style="color: red;" ></span></td>
            </tr>
            <tr>
                <td><label for="username">账号：</label></td>
                <td><input type="text" name="username" id="username" v-model="ruleForm.username"></td>
            </tr>
            <tr>
                <td><label for="password-label">密码：</label></td>
                <td><input type="password" name="password" id="password-label" v-model="ruleForm.password"></td>
            </tr>
            <tr>
                <td><label for="phone-label">电话：</label></td>
                <td><input type="text" name="phone" id="phone-label" v-model="ruleForm.phone"></td>
            </tr>
            <tr>
                <td>请选择性别：</td>
                <td><!--:checked="{'checked':ruleForm.sex==1}"-->
                    <input id="man" type="radio" name="sex" value="1"  >男
                    <input id="female" type="radio" name="sex" value="2" >女
                </td>
            </tr>
            <tr>
                <td><input type="submit" value="提交" id="submit" onclick="return s()"></td>
            </tr>
        </table>
    </form>
</div>
</body>

</html>
<script>
    function s() {
        let username = $("#username");
        let password = $("#password");
        let phone = $("#phone");
        let sex = $("#sex");
        let sp = $("#name-span");
        let name = $('#user-name-label');
        console.log(sp.val);
        console.log(name.val())
        if (name.val()=="") {
            sp.val("不能为空");
            alert("昵称为空");
            return false;
        } else if (username.val() == "") {
            console.log(username.val());
            alert("账号为空");
            return false;
        } else if (password.val()==null) {
            console.log(password.val());
            alert("密码为空");
            return false;
        } else if (phone.val() === "") {
            console.log(phone.val());
            alert("电话号码为空");
            return false;
        } else if (sex.val() == "") {
            console.log(sex.val());
            alert("性别为空");
            return false;
        }
        return true;
        // let sub = $("#dialog-from-label");
        // sub.submit("/employee/registered");
    }
</script>