单选框（必选）功能的实现

场景：一大堆单选框，你只要点击单选框，他就会取反，可以选一个，也可以全不选，那么问题来了，我想要的是必选一个单选框，又该如何实现呢？

这里我模拟一下，随便拿input做个演示，不起作用的，主要看思路，其实也没思路，我真服了自己了，我个老六，傻了吧唧的，居然思考半天。

<template><div class=""><div v-for="item in list" :key="item.id"><div>{{ item.title }}</div><inputtype="radio":value="item.check"@change="onChangeRadioClick(item.check, index)"/></div></div>
</template><script>
export default {data() {list: [{id: 1,title: "二十四年了",check: true,},{id: 2,title: "单身久了",check: false,},{id: 3,title: "没爱了",check: false,},];},methods: {// 单选事件onChangeRadioClick(check, index) {this.causeList.map((item) => (item.check = false));this.causeList[index].check = !check;},},
};

效果：

这样就是说，单选框是可以都不选的，而我想要的效果是，必须有一个是勾选的状态。

其实很简单，只需要改一个单词即可。

其实只要把 !check 改为 true 就可以实现，只要点击单选框就赋值为true，肯定会选中一个，而最开始写的 !check 只要点击就会取反，这样会导致出现单选框都可以不选的情况出现。

嘿，今天你学废了吗？

单选框（必选）功能的实现相关推荐

jQuery 单选框/复选框美化
对于前端萌新来说,美化表单是个痛苦的事情,通常都是去寻找插件这种逃避的办法,其实这并不是难事.在上篇文章中提到了兄弟元素选择器在表单美化中表现突出,下面的示例源码将体现基础篇知识的实际应用. 纯CS ...
html复选框美化插件,Labelauty – jQuery单选框/复选框美化插件
Labelauty – jQuery单选框/复选框美化插件分类:代码日期:2016-08-02 点击(38,744) 下载(0) 来源:未知收藏下拉框美化插件经常见到,如之前介绍过的 Drop ...
php多选筛选,织梦二次开发联动筛选(单选和多选)功能的实现
织梦dedecms二次开发联动筛选(单选和多选)功能的实现 . 首先我把单选的代码贴出来,这个是我参考其他网站的,多选也是基于这个单选修改的,所以如果要做多选的话,也请先把单选的这些代码配置好. 联动 ...
easyui前端实现多选框_EasyUI实现下拉框多选功能
本文实例为大家分享了EasyUI实现下拉框多选展示的具体代码,供大家参考,具体内容如下效果图: 这个没什么说的,直接引入css和js文件和图片,调用js即可.下面是源码: 利用EasyUI实现多选下 ...
JQuery获取选中的元素（单选框复选框）及其他等
看注释 <!DOCTYPE html> <html><head><meta charset="utf-8"><title> ...
补充layui的复选框必选一项或若干项，不选中或者点击提交都可提示错误信息
关于bootstrap的复选框必选若干项以及提示,请看这里头文件 <link rel="stylesheet" type="text/css" href ...
微信小程序实现单选、全选功能
前言概述本文介绍微信小程序实现单选.全选功能,效果如下: 实现过程 1.先实现页面效果,文件*.wxml和*.wxss代码如下: <view class="container&quo ...
vue实现多选框全选功能
vue实现多选框全选功能.如下,勾选时表示事情已处理完. html部分 <div><ul><li v-for="(todo, index) in todoLis ...
element 表格评分表（合并单元格，单选框按钮选分，计算表格总分）
文件下载 >>https://download.csdn.net/download/jemycc/12837044 突然发现 vxe 会更方便 vxe官网: https://xuliang ...
单选框-复选框重置的方法
问题描述希望对于填报表中的编辑风格为单选钮或复选框的单元格能够进行重置.如男.女单选框,在报表初始化展现时是两个单选钮都不点选,当选择一项后,无法将其重新改成都不点选的状态,需要能对单选钮的单元格进 ...

单选框（必选）功能的实现

单选框（必选）功能的实现相关推荐

最新文章

热门文章