vue中radio根据动态值绑定checked无效怎么办
发表于：2025-01-22 作者：千家信息网编辑
千家信息网最后更新 2025年01月22日，这篇文章主要介绍vue中radio根据动态值绑定checked无效怎么办，文中介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们一定要看完！1.问题分析在vue之前，我们想要获取某一组（设置相同的n
千家信息网最后更新 2025年01月22日vue中radio根据动态值绑定checked无效怎么办
这篇文章主要介绍vue中radio根据动态值绑定checked无效怎么办，文中介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们一定要看完！
1.问题分析
在vue之前，我们想要获取某一组（设置相同的name属性）radio的选中状态是通过name属性获取，判断input的checked是true还是false，但是当列表中有多组（动态获取）就显得很乏力；vue出现后我们可以通过v-model很巧妙的完成。
2.vue中分析（完成代码请看后面）
我们将name绑定COLUMN_CODE设置为同一组radio或checkbox；v-model绑定返回的值ISSELECT（true/false），value=‘true’表示当ISSELECT的值为true是该radio或checkbox就自动选中，同理，当我们选中某一项时对应的ISSELECT自动切换成true。
vue官网描述的是无需设置name，但是我在项目中测试过是通不过的，因为还是无法识别是同一组还是不同组，所以建议读者 加上。
3.完成代码（该例子中input是自定义的样式）
1）json数据
{ "THEME_STATUE": "1", "back_type": null, "THEME_CODE": "1495077293228", "THEME_NAME": "新款工作服样式调查问卷", "POLL_TYPE_DESC": "投票问卷（选择答题）", "POLL_TYPE": "B", "THEME_CONTENT": "关于新款工作服样式评价的投票通知各位职工朋友：今年，公司工作服已到新一轮采购周期。为提高职工对工作服的满意度，展示职工良好形象,安全管理部与工会一同对职工的意见反馈进行了收集，并组织职工代表对新款样衣进行了初评。现请广大职工朋友根据图样展示，评选心目中最佳的春、夏和冬装棉服款式。我们将根据大家投票结果定款。安全管理部、工会2017年5月15日", "ANSWER_MODE": "", "POLL_MULT_NUM": "", "POLL_SINGLE_NUM": "", "MAX_POLL_NUM": "", "POLL_SINGLE_SCORE": 0, "POLL_MULT_SCORE": 0, "BGIMG": "http://mobile.hbtobacco.cn:8088/emc_service/ImageAttDocument?docType=1&docId=a3d249fa8e3d72b9", "SCORE_STATUS": "", "SCORE_RESULT": "", "CREATE_DATE": "2017-05-31", "END_DATE": "2019-10-30", "ISANSWER": false, "COLUMN_LIST": [{ "COLUMN_CODE": "181", "COLUMN_NAME": "1、您所在的工作单位", "COLUMN_TYPE": "radio", "COLUMN_CONTENT": "", "ISSELECT": false, "OPTION_LIST": [{ "OPTION_CODE": "191", "OPTION_NAME": "A、厂 ", "OPTION_HREF": "", "OPTION_TYPE": "", "OPTION_CONTENT": "", "EMC_URL": "", "OPTION_ANSWER": "0", "POLLNUM": 0, "ISSELECT": false }, { "OPTION_CODE": "192", "OPTION_NAME": "B、烟厂 ", "OPTION_HREF": "", "OPTION_TYPE": "", "OPTION_CONTENT": "", "EMC_URL": "", "OPTION_ANSWER": "0", "POLLNUM": 0, "ISSELECT": false }, { "OPTION_CODE": "193", "OPTION_NAME": "C、湖北 ", "OPTION_HREF": "", "OPTION_TYPE": "", "OPTION_CONTENT": "", "EMC_URL": "", "OPTION_ANSWER": "0", "POLLNUM": 0, "ISSELECT": false }, { "OPTION_CODE": "194", "OPTION_NAME": "D、中国 ", "OPTION_HREF": "", "OPTION_TYPE": "", "OPTION_CONTENT": "", "EMC_URL": "", "OPTION_ANSWER": "0", "POLLNUM": 0, "ISSELECT": false }, { "OPTION_CODE": "195", "OPTION_NAME": "E、大大 ", "OPTION_HREF": "", "OPTION_TYPE": "", "OPTION_CONTENT": "", "EMC_URL": "", "OPTION_ANSWER": "0", "POLLNUM": 0, "ISSELECT": false }, { "OPTION_CODE": "196", "OPTION_NAME": "F、小小", "OPTION_HREF": "", "OPTION_TYPE": "", "OPTION_CONTENT": "", "EMC_URL": "", "OPTION_ANSWER": "0", "POLLNUM": 0, "ISSELECT": false }, { "OPTION_CODE": "197", "OPTION_NAME": "G、卷烟材料厂 ", "OPTION_HREF": "", "OPTION_TYPE": "", "OPTION_CONTENT": "", "EMC_URL": "", "OPTION_ANSWER": "0", "POLLNUM": 0, "ISSELECT": false }, { "OPTION_CODE": "198", "OPTION_NAME": "H、新业薄片公司 ", "OPTION_HREF": "", "OPTION_TYPE": "", "OPTION_CONTENT": "", "EMC_URL": "", "OPTION_ANSWER": "0", "POLLNUM": 0, "ISSELECT": false }] }, { "COLUMN_CODE": "142", "COLUMN_NAME": "2、您所在的工作区域", "COLUMN_TYPE": "radio", "COLUMN_CONTENT": "", "ISSELECT": false, "OPTION_LIST": [{ "OPTION_CODE": "61", "OPTION_NAME": "A、卷包车间 ", "OPTION_HREF": "", "OPTION_TYPE": "radio", "OPTION_CONTENT": "", "EMC_URL": "", "OPTION_ANSWER": "0", "POLLNUM": 0, "ISSELECT": false }, { "OPTION_CODE": "62", "OPTION_NAME": "B、制丝车间 ", "OPTION_HREF": "", "OPTION_TYPE": "radio", "OPTION_CONTENT": "", "EMC_URL": "", "OPTION_ANSWER": "0", "POLLNUM": 0, "ISSELECT": false }, { "OPTION_CODE": "63", "OPTION_NAME": "C、动力车间 ", "OPTION_HREF": "", "OPTION_TYPE": "radio", "OPTION_CONTENT": "", "EMC_URL": "", "OPTION_ANSWER": "0", "POLLNUM": 0, "ISSELECT": false }, { "OPTION_CODE": "64", "OPTION_NAME": "D、仓储、物流 ", "OPTION_HREF": "", "OPTION_TYPE": "radio", "OPTION_CONTENT": "", "EMC_URL": "", "OPTION_ANSWER": "0", "POLLNUM": 0, "ISSELECT": false }, { "OPTION_CODE": "65", "OPTION_NAME": "E、其他 ", "OPTION_HREF": "", "OPTION_TYPE": "text", "OPTION_CONTENT": "", "EMC_URL": "", "OPTION_ANSWER": "0", "POLLNUM": 0, "ISSELECT": false }] }, { "COLUMN_CODE": "143", "COLUMN_NAME": "3、您所在的工作岗位", "COLUMN_TYPE": "radio", "COLUMN_CONTENT": "", "ISSELECT": false, "OPTION_LIST": [{ "OPTION_CODE": "66", "OPTION_NAME": "A、操作工 ", "OPTION_HREF": "", "OPTION_TYPE": "", "OPTION_CONTENT": "", "EMC_URL": "", "OPTION_ANSWER": "0", "POLLNUM": 0, "ISSELECT": false }, { "OPTION_CODE": "67", "OPTION_NAME": "B、维修工 ", "OPTION_HREF": "", "OPTION_TYPE": "", "OPTION_CONTENT": "", "EMC_URL": "", "OPTION_ANSWER": "0", "POLLNUM": 0, "ISSELECT": false }, { "OPTION_CODE": "68", "OPTION_NAME": "C、辅助工 ", "OPTION_HREF": "", "OPTION_TYPE": "", "OPTION_CONTENT": "", "EMC_URL": "", "OPTION_ANSWER": "0", "POLLNUM": 0, "ISSELECT": false }, { "OPTION_CODE": "69", "OPTION_NAME": "D、管理人员 ", "OPTION_HREF": "", "OPTION_TYPE": "", "OPTION_CONTENT": "", "EMC_URL": "", "OPTION_ANSWER": "0", "POLLNUM": 0, "ISSELECT": false }, { "OPTION_CODE": "70", "OPTION_NAME": "E、其他 ", "OPTION_HREF": "", "OPTION_TYPE": "text", "OPTION_CONTENT": "", "EMC_URL": "", "OPTION_ANSWER": "0", "POLLNUM": 0, "ISSELECT": false }] }, { "COLUMN_CODE": "144", "COLUMN_NAME": "4、您心目中最佳的春、夏款式是", "COLUMN_TYPE": "radio", "COLUMN_CONTENT": "", "ISSELECT": false, "OPTION_LIST": [{ "OPTION_CODE": "71", "OPTION_NAME": "A、春、夏款款式一 ", "OPTION_HREF": "", "OPTION_TYPE": "imagelist", "OPTION_CONTENT": "", "EMC_URL": "http://mobile.hbtobacco.cn:8088/emc_service/ImageAttDocument?docType=1&docId=8f4e214b53e4cfce", "OPTION_ANSWER": "0", "POLLNUM": 0, "ISSELECT": false }, { "OPTION_CODE": "190", "OPTION_NAME": "B、春、夏款款式二", "OPTION_HREF": "", "OPTION_TYPE": "imagelist", "OPTION_CONTENT": "", "EMC_URL": "http://mobile.hbtobacco.cn:8088/emc_service/ImageAttDocument?docType=1&docId=927308324fa1f0fa", "OPTION_ANSWER": "0", "POLLNUM": 0, "ISSELECT": false }, { "OPTION_CODE": "72", "OPTION_NAME": "C、春、夏款款式三", "OPTION_HREF": "", "OPTION_TYPE": "imagelist", "OPTION_CONTENT": "", "EMC_URL": "http://mobile.hbtobacco.cn:8088/emc_service/ImageAttDocument?docType=1&docId=be74770291a746f3", "OPTION_ANSWER": "0", "POLLNUM": 0, "ISSELECT": false }, { "OPTION_CODE": "73", "OPTION_NAME": "D、春、夏款款式四", "OPTION_HREF": "", "OPTION_TYPE": "imagelist", "OPTION_CONTENT": "", "EMC_URL": "http://mobile.hbtobacco.cn:8088/emc_service/ImageAttDocument?docType=1&docId=8828122cb5818a04", "OPTION_ANSWER": "0", "POLLNUM": 0, "ISSELECT": false }, { "OPTION_CODE": "74", "OPTION_NAME": "E、春、夏款款式五", "OPTION_HREF": "", "OPTION_TYPE": "imagelist", "OPTION_CONTENT": "", "EMC_URL": "http://mobile.hbtobacco.cn:8088/emc_service/ImageAttDocument?docType=1&docId=a746a3bbb7d55e3b", "OPTION_ANSWER": "0", "POLLNUM": 0, "ISSELECT": false }, { "OPTION_CODE": "75", "OPTION_NAME": "F、现发放款式", "OPTION_HREF": "", "OPTION_TYPE": "", "OPTION_CONTENT": "", "EMC_URL": "", "OPTION_ANSWER": "0", "POLLNUM": 0, "ISSELECT": false }] }, { "COLUMN_CODE": "145", "COLUMN_NAME": "5、您心目中最佳的冬装棉服款式是", "COLUMN_TYPE": "radio", "COLUMN_CONTENT": "", "ISSELECT": false, "OPTION_LIST": [{ "OPTION_CODE": "76", "OPTION_NAME": "A、冬装棉服款式一 ", "OPTION_HREF": "", "OPTION_TYPE": "imagelist", "OPTION_CONTENT": "", "EMC_URL": "http://mobile.hbtobacco.cn:8088/emc_service/ImageAttDocument?docType=1&docId=b39968d6d0b7446e", "OPTION_ANSWER": "0", "POLLNUM": 0, "ISSELECT": false }, { "OPTION_CODE": "77", "OPTION_NAME": "B、冬装棉服款式二", "OPTION_HREF": "", "OPTION_TYPE": "imagelist", "OPTION_CONTENT": "", "EMC_URL": "http://mobile.hbtobacco.cn:8088/emc_service/ImageAttDocument?docType=1&docId=a55d3e9b0a49ae8d", "OPTION_ANSWER": "0", "POLLNUM": 0, "ISSELECT": false }] }, { "COLUMN_CODE": "146", "COLUMN_NAME": "6、在您选中的款式中，需要改进的细节 ", "COLUMN_TYPE": "radio", "COLUMN_CONTENT": "", "ISSELECT": false, "OPTION_LIST": [{ "OPTION_CODE": "78", "OPTION_NAME": "A、工牌悬挂配饰", "OPTION_HREF": "", "OPTION_TYPE": "", "OPTION_CONTENT": "", "EMC_URL": "", "OPTION_ANSWER": "0", "POLLNUM": 0, "ISSELECT": false }, { "OPTION_CODE": "79", "OPTION_NAME": "B、裤装口袋", "OPTION_HREF": "", "OPTION_TYPE": "", "OPTION_CONTENT": "", "EMC_URL": "", "OPTION_ANSWER": "0", "POLLNUM": 0, "ISSELECT": false }, { "OPTION_CODE": "80", "OPTION_NAME": "C、夹克口袋 ", "OPTION_HREF": "", "OPTION_TYPE": "", "OPTION_CONTENT": "", "EMC_URL": "", "OPTION_ANSWER": "0", "POLLNUM": 0, "ISSELECT": false }, { "OPTION_CODE": "81", "OPTION_NAME": "D、衣扣 ", "OPTION_HREF": "", "OPTION_TYPE": "", "OPTION_CONTENT": "", "EMC_URL": "", "OPTION_ANSWER": "0", "POLLNUM": 0, "ISSELECT": false }] }, { "COLUMN_CODE": "147", "COLUMN_NAME": "7、您对选中样衣的其他建议", "COLUMN_TYPE": "text", "COLUMN_CONTENT": "", "ISSELECT": false, "OPTION_LIST": [] }], "success": "1"}2）html代码
{{item1.OPTION_NAME}}{{item1.OPTION_NAME}}![]()
3）css样式
/*radio或checked的样式：*/ .checkbox-list-con .mint-msgbox-message{ line-height: 20px; } .checkbox-list-con span { position: relative; margin-right: 15px; } .checkbox-list-con .Checkbox { position: absolute; visibility: hidden; } .checkbox-list-con .Checkbox+label { position:absolute; width: 16px; height: 16px; border: 1px solid #A6A6A6; border-radius: 50%; background-color:#ffffff; } .checkbox-list-con .Checkbox:checked+label:after { content: ""; position: absolute; left: 2px; top:2px; width: 9px; height: 4px; border: 2px solid #00b7ee; border-top-color: transparent; border-right-color: transparent; transform: rotate(-45deg); -ms-transform: rotate(-60deg); -moz-transform: rotate(-60deg); -webkit-transform: rotate(-60deg); } .checkbox-list{ display: flex; flex-direction: row; margin-bottom: 5px; align-items: center; line-height: 20px; } .checkbox-list-con{ display: flex; flex-direction: column; padding: 10px 20px; } /*自定义checkbox*/ .tui-checkbox:checked { background:#1673ff } .tui-checkbox { width:25px; height:25px; background-color:#ffffff; border:solid 1px #dddddd; -webkit-border-radius:50%; border-radius:50%; font-size:0.8rem; margin:0; padding:0; position:relative; display:inline-block; vertical-align:top; cursor:default; -webkit-appearance:none; -webkit-user-select:none; user-select:none; -webkit-transition:background-color ease 0.1s; transition:background-color ease 0.1s; } .tui-checkbox:checked::after { content:''; top:5px; left:5px; position:absolute; background:transparent; border:#fff solid 2px; border-top:none; border-right:none; height:6px; width:10px; -moz-transform:rotate(-45deg); -ms-transform:rotate(-45deg); -webkit-transform:rotate(-45deg); transform:rotate(-45deg); } /*其他样式*/ .score-result{ font-size: 16px; font-weight: 600!important; color: #2E8B57; width: calc(100% - 40px); padding: 10px 20px; line-height: 20px; background: #ffffff; } .text-area-con{ width: 100%; } .text-area{ width: calc(100% - 10px); /*height: 80px;*/ padding: 5px; outline: none; resize: none; font-size: 15px; font-weight: 500; color: #333333; font-family: "Microsoft YaHei"; border: 1px solid #888888; } .appointment-btn { position: relative!important; font-size: 18px; color: #ffffff; text-align: center; line-height: 44px; height: 44px; border-top: 1px solid #f2f2f2; background: #366CB3; width: calc(100% - 32px); margin: 0px 0px 15px 16px; border-radius: 3px; letter-spacing: 4px; } .option-desc{ font-size: 15px; margin-left: 20px; width: calc(100% - 45px); text-align: justify; line-height: 24px; } .option-desc1{ font-size: 15px; margin-left: 20px; width: calc(100% - 45px); text-align: justify; line-height: 24px; color: #F0686E; } .option-con-img{ width: calc(100% - 90px); height: 140px; margin-left: 45px; } .option-con-row{ display: flex; align-items: center; width: 100%; padding: 10px 0px; } .option-con{ display: flex; flex-direction: column; align-items: flex-start; width: calc(100% - 40px); padding: 10px 20px; border-top: 1px solid #efefef; } .select-item-title{ width: calc(100% - 40px); padding: 10px 20px; color: #4682B4; text-align: justify; font-size: 15px; line-height: 24px; } .select-item{ display: flex; flex-direction: column; margin-bottom: 15px; background: #ffffff; } .bottom-con{ display: flex; flex-direction: column; width: 100%; background: #f2f2f2; } .top-four-img{ width: 16px; height: 16px; } .top-four-title{ color: #434343; font-size: 16px; margin-right: 5px; } .top-four{ display: flex; justify-content: center; align-items: center; background: #ffffff; width: 100%; padding: 15px 0px; } .top-three-content{ color: #333333; font-size: 15px; line-height: 28px; text-indent:2em; text-align: justify; } .top-three-desc{ color: #4682B4; font-size: 15px; line-height: 28px; text-indent:2em; } .top-three{ width: calc(100% - 40px); padding: 15px 20px 0px 20px; background: #ffffff; overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; } .top-three1{ width: calc(100% - 40px); padding: 15px 20px 15px 20px; background: #ffffff; } .top-two-time{ width: 100%; text-align: center; font-size: 13px; color: #999999; margin-bottom: 10px; } .top-two-title{ font-size: 18px; color: #4682B4; text-align: center; width: 100%; margin-bottom: 10px; line-height: 24px; } .top-one>img{ height: 100%; width: 100%; } .top-two{ width: calc(100% - 40px); background: #ffffff; padding:0px 20px; border-bottom: 1px solid #efefef; } .top-one{ height: 100px; width: 100%; } .top-con{ display: flex; flex-direction: column; justify-content: center; align-items: center; width: 100%; margin-bottom: 15px; } .wrapper { width: 100%; height: 100%; /*height: calc(100% - 70px);*/ overflow: auto; background: #f2f2f2; -webkit-overflow-scrolling: touch; } .container { height: 100%; background-color: #f2f2f2; display: flex; flex-direction: column; }4.效果图
以上是"vue中radio根据动态值绑定checked无效怎么办"这篇文章的所有内容，感谢各位的阅读！希望分享的内容对大家有帮助，更多相关知识，欢迎关注行业资讯频道！
款式
工作
样式
职工
冬装
工作服
棉服
动态
代码
心目
所在
还是
投票
管理
怎么办
安全
公司
内容
口袋
属性
数据库的安全要保护哪些东西
数据库安全各自的含义是什么
生产安全数据库录入
数据库的安全性及管理
数据库安全策略包含哪些
海淀数据库安全审计系统
建立农村房屋安全信息数据库
易用的数据库客户端支持安全管理
连接数据库失败ssl安全错误
数据库的锁怎样保障安全
用友u8管理服务器名称
金铲铲登神长阶服务器没有
django后端数据库
列举优化数据库性能的方法
有关网络安全的五人小品
低格软件开发
免费独立服务器
阿贝云服务器是免费的吗
数据库如何判断关系模式
纯国产化服务器端口开放
杭州品浪网络技术有限公司
数据库 中间库
厦门市网络安全产业联盟
web服务器 性能指标
小学生网络安全教育宣传教案
软件开发薪资高吗
数据库 仓库模板
顺流软件开发
中国银行软件开发用什么语言
数据库相关例题及答案
微信登录服务器异常怎么办
数据库中表的含义是什么
台达服务器报警ale09
网络安全意识培训免费下载
数据库的特点有三个
杭州未来科技城和互联网小镇
达梦dm8数据库主备集群
服务器在网络拓扑中的样子
单词软件开发
网络安全靠大家的手抄报内容
