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” 中的代码可有可无,大家可以试试

 

 

你可能感兴趣的:(checkbox)