checkbox 实现单选效果(html)

最新推荐文章于 2024-07-29 09:00:53 发布

HiRonan

最新推荐文章于 2024-07-29 09:00:53 发布

阅读量3k

点赞数

CC 4.0 BY-SA版权

分类专栏：小功能文章标签： html checkbox 单选效果

本文链接：https://blog.youkuaiyun.com/u012360222/article/details/33191693

小功能专栏收录该内容

4 篇文章

订阅专栏

本文介绍了如何在HTML中使用checkbox实现单选效果，以满足特定的用户界面需求。通过示例代码展示了一种实现方法，并提及可能不需要的‘undefined’情况处理。同时提醒注意jQuery的引用。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

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

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

废话不多说直接上代码：

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

ps：注意引用jQuery