jQuery 单选框/复选框美化

2024-09-05 02:48

本文主要是介绍jQuery 单选框/复选框美化,希望对大家解决编程问题提供一定的参考价值,需要的开发者们随着小编来一起学习吧!

对于前端萌新来说,美化表单是个痛苦的事情,通常都是去寻找插件这种逃避的办法,其实这并不是难事。在上篇文章中提到了兄弟元素选择器在表单美化中表现突出,下面的示例源码将体现 基础篇知识的实际应用。

纯CSS版:http://www.jq22.com/webqd5106

上效果图:

源码如下:

<!--author:helangEmail:helang.love@qq.com
-->
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="author" content="helang.love@qq.com"><title>jQuery之美——单选框/复选框美化</title><style type="text/css">.ul_box {margin:0 auto;padding:0;list-style:none;width:600px;}.ul_box>li {padding:10px 10px 0 10px;overflow:hidden;border-bottom:#e5e5e5 solid 1px;}.ul_box>li:last-child {border-bottom:none;}.ul_box>li>div {float:left;}.ul_box>li>div:nth-child(1) {width:100px;}.ul_box>li>div:nth-child(2) {width:480px;overflow:hidden;}.label_box>label {display:block;float:left;margin:0 10px 10px 0;position:relative;overflow:hidden;}.label_box>label>input {position:absolute;top:0;left:-20px;}.label_box>label>div {width:100px;text-align:center;border:#dddddd solid 1px;height:40px;line-height:40px;color:#666666;user-select:none;overflow:hidden;position:relative;}.label_box>label>div.active{border:#d51917 solid 1px;background-color: #fff9f8;color:#d51917;}.label_box>label>div.active:after {content:'';display:block;width:20px;height:20px;background-color:#d51917;transform:skewY(-45deg);position:absolute;bottom:-10px;right:0;z-index:1;}.label_box>label>div.active:before {content:'';display:block;width:3px;height:8px;border-right:#ffffff solid 2px;border-bottom:#ffffff solid 2px;transform:rotate(35deg);position:absolute;bottom:2px;right:4px;z-index:2;}</style>
</head>
<body>
<h1 style="text-align: center;">jQuery之美——单选框/复选框美化</h1>
<ul class="ul_box"><li><div>单选框:</div><div class="label_box"><label><input type="radio" name="sex"><div>男</div></label><label><input type="radio" name="sex"><div>女</div></label></div></li><li><div>复选框:</div><div class="label_box"><label><input type="checkbox" name="hobby"><div>旅游</div></label><label><input type="checkbox" name="hobby"><div>爬山</div></label><label><input type="checkbox" name="hobby"><div>游泳</div></label></div></li>
</ul>
<h5 style="text-align: center;">helang.love@qq.com</h5>
<script type="text/javascript" src="https://mydarling.gitee.io/resource/jQuery/jquery-1.9.1.min.js"></script>
<script type="text/javascript">/* jQuery对象级别插件扩展 */$.fn.extend({/* 单选框 */hlRadio:function () {var radioEl=$(this);radioEl.click(function () {radioEl.siblings("div").removeClass("active");$(this).siblings("div").addClass("active");});},/* 复选框 */hlCheckbox:function () {var checkboxEl=$(this);checkboxEl.click(function () {if($(this).prop("checked")){$(this).siblings("div").addClass("active");}else {$(this).siblings("div").removeClass("active");}});}});$("input[name='sex']").hlRadio();$("input[name='hobby']").hlCheckbox();
</script>
</body>
</html>

知识点摘要:

  1. 链式语法

  2. 插件扩展

  3. prop()方法

  4. 基本选择器

  5. 兄弟元素选择器

点击上面的链接,可直接查看对应的知识点文章哦。

本篇文章主要为突出jQuery的使用,一般情况下纯CSS即可实现。但如果用于PC段还是建议使用本方式。

当然实现这整个效果,并不是JS一个人的功劳,CSS和HTML也同样重要。其中的关键先生是 <label> 标记,<label> 有着显式指向和隐式指向的功能

W3C <label> 标记介绍:http://www.w3school.com.cn/tags/tag_label.asp

纯CSS美化单选/复选框:http://www.jq22.com/webqd5106

--------------------------------------------------------------------------------------------------------------------------------

本篇文章是第一次将之前的基础篇文章知识点实际应用,也是第一次用插件的方式写。对于jQuery插件,不要觉得太过于神秘。只是别人写的功能多一点罢了,以后的源码示例文章都会尽量以插件的形式写。大家也可以多去尝试写一写自己的jQuery插件,不过在这之前,自己的基本功不能拖后退。尤其重点知识:面向对象编程,数据类型,工厂/构造/原型开发模式

--------------------------------------------------------------------------------------------------------------------------------

作者:黄河爱浪 QQ:1846492969,邮箱:helang.love@qq.com

微信公众号:web-7258,本文原创,著作权归作者所有,转载请注明原链接及出处。

更多精彩文章,请扫下方二维码关注我的公众号

这篇关于jQuery 单选框/复选框美化的文章就介绍到这儿,希望我们推荐的文章对编程师们有所帮助!



http://www.chinasem.cn/article/1137762

相关文章

全面解析HTML5中Checkbox标签

《全面解析HTML5中Checkbox标签》Checkbox是HTML5中非常重要的表单元素之一,通过合理使用其属性和样式自定义方法,可以为用户提供丰富多样的交互体验,这篇文章给大家介绍HTML5中C... 在html5中,Checkbox(复选框)是一种常用的表单元素,允许用户在一组选项中选择多个项目。本

HTML5 搜索框Search Box详解

《HTML5搜索框SearchBox详解》HTML5的搜索框是一个强大的工具,能够有效提升用户体验,通过结合自动补全功能和适当的样式,可以创建出既美观又实用的搜索界面,这篇文章给大家介绍HTML5... html5 搜索框(Search Box)详解搜索框是一个用于输入查询内容的控件,通常用于网站或应用程

CSS3中的字体及相关属性详解

《CSS3中的字体及相关属性详解》:本文主要介绍了CSS3中的字体及相关属性,详细内容请阅读本文,希望能对你有所帮助... 字体网页字体的三个来源:用户机器上安装的字体,放心使用。保存在第三方网站上的字体,例如Typekit和Google,可以link标签链接到你的页面上。保存在你自己Web服务器上的字

html 滚动条滚动过快会留下边框线的解决方案

《html滚动条滚动过快会留下边框线的解决方案》:本文主要介绍了html滚动条滚动过快会留下边框线的解决方案,解决方法很简单,详细内容请阅读本文,希望能对你有所帮助... 滚动条滚动过快时,会留下边框线但其实大部分时候是这样的,没有多出边框线的滚动条滚动过快时留下边框线的问题通常与滚动条样式和滚动行

使用vscode搭建pywebview集成vue项目实践

《使用vscode搭建pywebview集成vue项目实践》:本文主要介绍使用vscode搭建pywebview集成vue项目实践,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地... 目录环境准备项目源码下载项目说明调试与生成可执行文件核心代码说明总结本节我们使用pythonpywebv

使用Python和Tkinter实现html标签去除工具

《使用Python和Tkinter实现html标签去除工具》本文介绍用Python和Tkinter开发的HTML标签去除工具,支持去除HTML标签、转义实体并输出纯文本,提供图形界面操作及复制功能,需... 目录html 标签去除工具功能介绍创作过程1. 技术选型2. 核心实现逻辑3. 用户体验增强如何运行

CSS 样式表的四种应用方式及css注释的应用小结

《CSS样式表的四种应用方式及css注释的应用小结》:本文主要介绍了CSS样式表的四种应用方式及css注释的应用小结,本文通过实例代码给大家介绍的非常详细,详细内容请阅读本文,希望能对你有所帮助... 一、外部 css(推荐方式)定义:将 CSS 代码保存为独立的 .css 文件,通过 <link> 标签

使用Vue-ECharts实现数据可视化图表功能

《使用Vue-ECharts实现数据可视化图表功能》在前端开发中,经常会遇到需要展示数据可视化的需求,比如柱状图、折线图、饼图等,这类需求不仅要求我们准确地将数据呈现出来,还需要兼顾美观与交互体验,所... 目录前言为什么选择 vue-ECharts?1. 基于 ECharts,功能强大2. 更符合 Vue

Vue中插槽slot的使用示例详解

《Vue中插槽slot的使用示例详解》:本文主要介绍Vue中插槽slot的使用示例详解,本文通过实例代码给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友参考下吧... 目录一、插槽是什么二、插槽分类2.1 匿名插槽2.2 具名插槽2.3 作用域插槽三、插槽的基本使用3.1 匿名插槽

springboot+vue项目怎么解决跨域问题详解

《springboot+vue项目怎么解决跨域问题详解》:本文主要介绍springboot+vue项目怎么解决跨域问题的相关资料,包括前端代理、后端全局配置CORS、注解配置和Nginx反向代理,... 目录1. 前端代理(开发环境推荐)2. 后端全局配置 CORS(生产环境推荐)3. 后端注解配置(按接口