zoukankan      html  css  js  c++  java
  • checkbox 实现单选效果(html)

    note:在html <input> 标签类中的checkbox实现单选效果。

    在最近的开发项目中,客户要求使用小方格子实现“单选”功能,显然圆点的radio被out了,只能选择chckbox的方块样式,也在网上搜过,可能有点儿脑残,没有找到。

    废话不多说直接上代码:

    ps:只是一个简单的demo。

    <!DOCTYPE html>  
    <html xmlns="http://www.w3.org/1999/xhtml">  
    <head>  
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>  
        <title>checkbox实现单选效果</title>  
        <script src="jquery-1.7.2.min.js"></script>  
        <script>  
            $(document).ready(function () {  
                $('.sb').click(function () {  
                    var typeThis = typeof ($(this).attr("checked"));  
                    switch (typeThis) {  
                        case "string":  
                            if ($(this).attr("checked").toLowerCase()=="checked") {  
                                $('.sb').each(function () {  
                                    $(this).removeAttr("checked");  
                                });  
                                $(this).attr("checked",true);  
                            }  
                            break;  
                        case "undefined":  
                            $('.sb').each(function () {  
                                $(this).removeAttr("checked");  
                            });  
                            break;  
                    }  
                });  
            });  
        </script>  
    </head>  
    <body>  
        <input class="sb" type="checkbox" value="1"/>  
        <input class="sb" type="checkbox" value="2" />  
        <input class="sb" type="checkbox" value="3" />  
        <input class="sb" type="checkbox" value="4" />  
    </body>  
    </html>  

    当然在case “undefined” 中的代码可有可无,大家可以试试

  • 相关阅读:
    网络状态码含义——(比如204,304, 404, 504,502)
    Vue两个简易代替vuex的方法(eventBus,observable)
    单页面首屏加载慢解决方案
    前端监控和前端埋点
    ES5 和 ES6的继承
    mysql 隔离级别
    mysql 事务
    Seata
    Sentinel Dashboard 部署
    java 垃圾回器
  • 原文地址:https://www.cnblogs.com/Ruonan-Li/p/3805881.html
Copyright © 2011-2022 走看看