摘要:开关样式预览图前言最近在基于框架开发一个网站,在填写表单一项需要用户填写是否选择某一选项,本来想引用框架自带的一个按钮插件,结果在引用的时候总是出错,就找了找资源,用纯实现这个按钮开关的功能。
开关样式预览图 前言
最近在基于bootstrap框架开发一个网站,在填写表单一项需要用户填写是否选择某一选项,本来想引用bootstrap框架自带的一个按钮插件,结果在引用js的时候总是出错,就找了找资源,用纯css实现这个按钮开关的功能。
具体代码过程话不多说,直接上代码实现!
html代码部分css代码部分
input[type=checkbox] { visibility: hidden; } .checkbox { width: 120px; height: 30px; background: #FFF; margin: 1px 1px; border-radius: 10px; position: relative; } .checkbox:before { content: "是"; position: absolute; top: 12px; left: 16px; height: 2px; /*color: #26ca28;*/ color: #4baa34; font-size: 16px; /*font-weight:bold;*/ } .checkbox:after { content: "否"; position: absolute; top: 12px; left: 80px; height: 2px; color: #ffffd; font-size: 16px; /*font-weight:bold;*/ } .checkbox label { display: block; width: 40px; height: 22px; border-radius: 50px; -webkit-transition: all .5s ease; -moz-transition: all .5s ease; -o-transition: all .5s ease; -ms-transition: all .5s ease; transition: all .5s ease; cursor: pointer; position: absolute; top: 9px; z-index: 1; left: 12px; background: #ffffd; } .checkbox input[type=checkbox]:checked + label { left: 62px; /*background: #26ca28;*/ background: #4baa34; }js代码部分
if ($("#isnot").attr("checked")) {var isnot=1}else{var isnot=0};
通过jq获取按钮是否被选中的值,ajax传给后台php进行数据的处理,完成数据库的操作
jq获取按钮是否被选中的值
一点小心得,自己开发时间不长,感觉在开发过程中最怕遇到一时半会解决不了的问题,尤其还有新的知识点需要掌握的时候,比如这个问题,在js代码和关于bootstrap框架js引入的,和bootstrap摸态框的处理机制上费了很多功夫,最后也不是很明白,导致这个功能一直没有实现,最后在网上查了相关信息和代码,决定直接绕过js,用纯的css来实现,最后只是引入了css,少引入了框架里的几个js,既解决了问题,也提高了代码的执行效率。
文章版权归作者所有,未经允许请勿转载,若此文章存在违规行为,您可以联系管理员删除。
转载请注明本文地址:https://www.ucloud.cn/yun/49915.html
摘要:开关样式预览图前言最近在基于框架开发一个网站,在填写表单一项需要用户填写是否选择某一选项,本来想引用框架自带的一个按钮插件,结果在引用的时候总是出错,就找了找资源,用纯实现这个按钮开关的功能。 开关样式预览图 showImg(https://segmentfault.com/img/bVyYer); 前言 最近在基于bootstrap框架开发一个网站,在填写表单一项需要用户填写是否选择...
摘要:开关样式预览图前言最近在基于框架开发一个网站,在填写表单一项需要用户填写是否选择某一选项,本来想引用框架自带的一个按钮插件,结果在引用的时候总是出错,就找了找资源,用纯实现这个按钮开关的功能。 开关样式预览图 showImg(https://segmentfault.com/img/bVyYer); 前言 最近在基于bootstrap框架开发一个网站,在填写表单一项需要用户填写是否选择...
摘要:开关样式预览图前言最近在基于框架开发一个网站,在填写表单一项需要用户填写是否选择某一选项,本来想引用框架自带的一个按钮插件,结果在引用的时候总是出错,就找了找资源,用纯实现这个按钮开关的功能。 开关样式预览图 showImg(https://segmentfault.com/img/bVyYer); 前言 最近在基于bootstrap框架开发一个网站,在填写表单一项需要用户填写是否选择...
阅读 2674·2023-04-25 14:15
阅读 2624·2021-11-04 16:11
阅读 3366·2021-10-14 09:42
阅读 402·2019-08-30 15:52
阅读 2791·2019-08-30 14:03
阅读 3520·2019-08-30 13:00
阅读 2081·2019-08-26 11:40
阅读 3255·2019-08-26 10:25