首页 > 代码库 > chckbox 实现单选效果（html）
chckbox 实现单选效果（html）
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” 中的代码可有可无，大家可以试试
声明：以上内容来自用户投稿及互联网公开渠道收集整理发布，本网站不拥有所有权，未作人工编辑处理，也不承担相关法律责任，若内容有误或涉及侵权可进行投诉： 投诉/举报 工作人员会在5个工作日内联系你，一经查实，本站将立刻删除涉嫌侵权内容。