首页
学习
活动
专区
工具
TVP
发布
您找到你想要的搜索结果了吗?
是的
没有找到

优化单选框 radio 样式:随点击变换选中和未选中状态图片

,为了加强用户体验,我们通过示意图来演示这个布局下的图片魔方在小程序前端的效果,为区分选中和未选中状态,每种布局需要两种状态。...原本以为这个需要通过 JS 来处理,后面发现通过简单的 CSS 也可以实现,我只需要把相关的 HTML 和 CSS 代码贴出来,你就能看得懂: 1...."]{ // 隐藏 radio display: none; } #label_layout_3-1{ // 未选中的效果 background-image: url(cube-radio-3-1....png); } #layout_3-1:checked + #label_layout_3-1 { // 选中的效果,使用了 CSS 相邻兄弟选择器 background-image: url(cube-radio-selected...: url(cube-radio-3-3.png); } #layout_3-3:checked + #label_layout_3-3 { background-image: url(cube-radio-selected

2.3K20

jquery 获取或设置radio单选框选中值的方法

jquery 获取或设置radio单选框选中值的代码 1、获取选中值,三种方法都可以: 2、设置第一个Radio选中值: 3、设置最后一个Radio选中值: 4、根据索引值设置任意一个radio选中值...: 5、根据Value值设置Radio选中值 6、删除Value值为rd2的Radio 7、删除第几个Radio 8、遍历Radio 1、获取选中值,三种方法都可以: $('input:radio:checked..., ‘true’)= attr(“checked”, true) 3、设置最后一个Radio选中值: $('input:radio:last').attr('checked', 'checked'...); 或者 $('input:radio:last').attr('checked', 'true'); 4、根据索引值设置任意一个radio选中值: $('input:radio').eq(索引值...或 $('input:radio').slice(1,2).attr('checked', 'true'); 5、根据Value值设置Radio选中值 $("input:radio[value=http

5.6K30

JS魔法堂:阻止元素被选中

一、前言                               在为IE5.5~9polyfill HTML5新特性placeholder时需要阻止元素被选中,因此在网上、书上查阅相关资料,记录在此以便日后查阅...以下两个属性目前并未支持,写在这里为了减少风险 */ -o-user-select: none; user-select: none; } user-select: auto; => 用户可以选中元素中的内容...user-select: none; => 用户不可选中元素中的内容 user-select: text; => 用户可以选中元素中的文字 目前这个 user-select 兼容 Chrome 6+、...} }; 四、参考                                《JavaScript框架设计》──9.3.2 user-select    http://www.html-js.com

3.8K60

checkbox选中和不选中的值_设置checkbox选中状态

1.设置选中:$(“#hasApply”).prop(“checked”,true); 设置不选中:$(“#hasApply”).prop(“checked”,false); 或如下方法: // $(...“#ck”).attr(“checked”,true)//选中 // $(“#ck”).attr(“checked”,false)//未选中 2.获取选中的状态:var status = $(“#hasApply...”).prop(“checked”); 3.判断checkbox是否选中的3种方法 方法一: if ((“#checkbox-id”).get(0).checked) { // do something...((‘#checkbox-id’).attr(‘checked’)) { // do something } 注意:在jQuery1.6版本之后,这个方法返回的是undefined;取复选框有没有被选中...,要用prop,返回true/false if((‘#checkbox-id’).prop(‘checked’)) {   //do something } 获取选择 radio 的值 发布者:全栈程序员栈长

6.9K20

flutter Radio 单选框

Radio 单选框 目前在西瓜视频上免费刊登 Flutter 系列教程,每日更新,欢迎关注接收提醒 【x1】点击查看提示 【x2】各种系列的教程 【x3】Flutter文章积累目录 1 flutter单选框...Radio的基本使用 ///单选框的基本使用 ///默认选中的单选框的值 int groupValue = 0; Radio buildRadioUseWidget() {...}); }, ); } 运行效果如下图所示 在实际项目开发中,一般单选框都会成组使用,不会单独使用,如下图所示效果: 代码如下: ///默认选中的单选框的值...}); }, ) ],); } 如下图所示效果,是在实际项目中也比较常用的一种设计效果,单选框与文字结合使用,在水平方向通过结合Row来实现 ///默认选中的单选框的值...在上图的效果基础上进行一些改造,将单选框Radio与文字的排列方式使用线性布局Column来组件,实现的效果如下图所示,对应的关键代码如下: 代码如下: ///单选框的成组使用 ///默认选中的单选框的值

1.6K20
领券