首页
学习
活动
专区
工具
TVP
发布
精选内容/技术社群/优惠产品,尽在小程序
立即前往
您找到你想要的搜索结果了吗?
是的
没有找到

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

果酱小程序的页面管理,其中一个模块是图片魔方,就是用户可以给小程序首页设置不同数量和布局的图片魔方来装修,其中在设置图片模仿的时候,要选择几张图布局是怎么布局的,如下图所示: 这里的布局其实是一个单选框...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

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原生方法 与 jQuery方法 分析

hasAttribute("checked");//返回true 或者 false 解释 checked 属性适用于 和 <input type="<em>radio</em>...(),没法删除用户点击<em>页面</em>上的input元素加上的checked属性,简单的说,如果你 按 F12 能看见这个input标签上有checked属性,removeAttribute(),这个方法就能用,...---- 我们在代码中 设置是 inp被<em>选中</em> 打开<em>页面</em>后 点击inp2 让inp 没<em>选中</em> 但是inp的值并没有发生变化 ---- ? ?...原生的,类似于<em>js</em>原生 方法二 方法二 is() 方法用于查看选择的元素是否匹配选择器,:checked 是jQuery中的选择器 选取所有被<em>选中</em>的元素(复选框或单选按钮)这个方法是推荐使用的jQuery...原生方法一 总结 获取<em>页面</em>被<em>选中</em>元素的方法有很多,最后这里推荐几种简单实用的 <em>js</em>原生方法 方法一: document.getElementById(elementID)["checked

5K20

Flutter跨页面改变BottomNavigationBar选中下标

前言 需求是这样的,bottomBar内有A,B,C,D页面,4个页面由tabBar管理显示,当在A页面点击按钮时让TabBar选中B页面展示,通俗来讲就是在两个不相邻的Widget里,一个Widget...,tabBar监听广播并改变下标 下面是代码部分 方案1(Provider方案) 代码: 1.编写Provider类 //方案1 使用provider 跨页面改变tabBar选中的下标 class RootProvider...Provider 使tabBar改变选中下标 // 如A页面的点击函数内 GestureDetector( onTap: () {...// 调用Provider选中第1个 即第2个页面(ps: 下标从0开始的哦~) Provider.of(context,listen...也就是想要发送的消息内容 import 'package:event_bus/event_bus.dart'; //Bus 初始化 EventBus eventBus = EventBus(); // tabBar切换选中页面

1.1K20

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

小程序开发笔记

页面中有一些选项,在初始状态下只展示第一项,并且该项默认处于选中状态,当选中该项的否时显示下一项,直到显示到选择最后一项,当选中的是除最后一项之外的每项的是时,隐藏后面的选项 最终实现的效果如下...文件中添加js代码 const app = getApp() Page({ /** * 页面的初始数据 */ data: { //当前选中项的索引...(e.target.id) }); } } }) 以上选项都不选中 这次小程序中还有一个需求,在多选中有一个以上选项都不选中按钮,当选中以上选项都不选中时...,之前选中的选项由选中状态变为不选中状态,当选中除以上选项都不选中的其他选项时,以上选项都不选中的选项变为不选中状态 实现代码 wxml中的布局代码如下 <wxs src="....代码如下 //pages/test/index.<em>js</em> Page({ /** * <em>页面</em>的初始数据 */ data: { checkList: [

4.2K20
领券