jQuery 单选框/复选框美化

我不是女神ヾ 2022-05-10 00:08 497阅读 0赞

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

纯CSS版：[http://www.jq22.com/webqd5106][http_www.jq22.com_webqd5106]

上效果图：

![70][]

源码如下：

<!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.  [链式语法][Link 1]
2.  [插件扩展][Link 2]
3.  [prop()方法][prop]
4.  [基本选择器][Link 3]
5.  [兄弟元素选择器][Link 4]

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

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

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

W3C <label> 标记介绍：[http://www.w3school.com.cn/tags/tag\_label.asp][http_www.w3school.com.cn_tags_tag_label.asp]

纯CSS美化单选/复选框：[http://www.jq22.com/webqd5106][http_www.jq22.com_webqd5106]

\--------------------------------------------------------------------------------------------------------------------------------

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

\--------------------------------------------------------------------------------------------------------------------------------

> 作者：[黄河爱浪][Link 5] QQ：1846492969，邮箱：helang.love@qq.com
> 
> 微信公众号：`web-7258`，本文原创，著作权归作者所有，转载请注明原链接及出处。
> 
> 更多精彩文章，请扫下方二维码关注我的公众号
> 
> ![20190512094840637.jpg][]

[http_www.jq22.com_webqd5106]: http://www.jq22.com/webqd5106
[70]: /images/20220510/4561580a1cac4828827944621727702d.png
[Link 1]: http://mp.weixin.qq.com/s?__biz=MzI5MzczMDQ3Mg==&mid=2247483661&idx=1&sn=1549600b6ff3ba8e14333d60e76e95f6&chksm=ec6ce0cadb1b69dcf13a2dbb4e009f04635c5ffbdd05c9024b883bcf8d305601ee73023bf6d3&scene=21#wechat_redirect
[Link 2]: http://mp.weixin.qq.com/s?__biz=MzI5MzczMDQ3Mg==&mid=2247483680&idx=1&sn=3f4aa00b145056a0ea42c1a122e5e654&chksm=ec6ce0e7db1b69f11c6deed17a144be14f6cef0d80aaf093af81d9454206a63588188466385c&scene=21#wechat_redirect
[prop]: http://mp.weixin.qq.com/s?__biz=MzI5MzczMDQ3Mg==&mid=2247483688&idx=1&sn=a954d6d44bb0c4319fff7c1b03e90c5f&chksm=ec6ce0efdb1b69f9c1adc11deb55c9085a350a228c672b245f517cb68f5404bf1f287e5a4a5e&scene=21#wechat_redirect
[Link 3]: http://mp.weixin.qq.com/s?__biz=MzI5MzczMDQ3Mg==&mid=2247483694&idx=1&sn=f3ac1cf978edaf906f3ea389c440e61a&chksm=ec6ce0e9db1b69ffdbcb9b39651fb73a9e07d7a19354b6519bd0784e60733ef2ec63056d8335&scene=21#wechat_redirect
[Link 4]: http://mp.weixin.qq.com/s?__biz=MzI5MzczMDQ3Mg==&mid=2247483698&idx=1&sn=1ee484506d6e84a5371b3e16412621ee&chksm=ec6ce0f5db1b69e3d8daca56884dfd3e489a8830cbc46cff28eacd20026ef9b3e4c7e4198955&scene=21#wechat_redirect
[http_www.w3school.com.cn_tags_tag_label.asp]: http://www.w3school.com.cn/tags/tag_label.asp
[Link 5]: https://blog.csdn.net/u013350495
[20190512094840637.jpg]: /images/20220510/8176b1f423834d2a91b797b0a61d884e.png