vue中radio根据动态值绑定checked无效怎么办
发表于：2025-11-10 作者：千家信息网编辑
千家信息网最后更新 2025年11月10日，这篇文章主要介绍vue中radio根据动态值绑定checked无效怎么办，文中介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们一定要看完！1.问题分析在vue之前，我们想要获取某一组（设置相同的n
千家信息网最后更新 2025年11月10日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安全错误
数据库的锁怎样保障安全
濮阳自动量化交易软件开发报价
cad cam软件开发培训
三维多模态医学图像配准软件开发
中国人才数据库官网查询系统
数字书法软件开发
通信软件开发设施检测中心
数据库关系数据库基本表应用题
为什么互联网巨头不做高科技
IPv6光猫服务器配置
用友用oracle数据库
网络安全管理讲座
网络安全技术与实践书本习题练习
网络安全法病毒
mc 服务器 小地图
长宁区网络技术服务信息推荐
获取嫌疑人服务器
excel服务器 旗舰版
闵行区进口软件开发厂家直销
局 网络安全制度
服务器配置管理规划论文
家庭云服务器
实验7 数据库的安全性
中国化学数据库有哪些
北京智慧团建软件开发专业制作
魔灵召唤数据库
天刀手游服务器满了怎么办
陕陕兼达网网络技术有限公司
c 如何修改文档中数据库
淮安网络安全保卫大队
浙江综合网络技术咨询产品
