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 实现单选效果（html）

相关文章