checkbox 实现单选效果（html）

最新推荐文章于 2021-08-20 13:39:24 发布

转载最新推荐文章于 2021-08-20 13:39:24 发布 · 458 阅读

0 ·

CC 4.0 BY-SA版权

原文链接：http://www.cnblogs.com/Ruonan-Li/p/3805881.html

文章标签：

#xhtml

本文提供了一个简单的HTML代码示例，演示如何利用checkbox标签实现类似单选按钮的功能，适合对圆点radio按钮有特殊需求的场景。代码包含jQuery的使用，通过事件监听实现了点击checkbox时的逻辑判断，确保每次只选中一个选项。

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

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>