首页
学习
活动
专区
工具
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.7K41

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

Vue快速入门(二)

change 当元素的值发生改变时 触发的事件 blur 当输入框失去焦点的时候 触发的事件 change 和 blur 最本质的区别: 如果输入框为空,失去焦点后,change不会触发...,绑定input输入就触发,绑定change改变值触发,光标移走不会触发区别blur 注意: this的指向问题,如果想要this指向的对象始终是一个对象,比如始终指向Vue对象,可以通过 var _this...单选 radio对应的是value值,比如选中男,radio就是男 <!...: { radio: '', }, }) 总结 checkbox单选是布尔值,选中为true,反之为false...checkbox多选是数组 radio选中是字符串,比如选中性别男,radio 的value值就是男 v-model进阶 v-model 之 lazy、number、trim lazy:等待input框的数据绑定时区焦点之后再变化

3K20
领券