checkbox 实现单选效果(html)
来源:互联网 发布:数据结构与算法博客 编辑:程序博客网 时间:2024/05/08 14:28
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
0 0
- checkbox 实现单选效果(html)
- checkbox实现单选按钮效果
- input:checkbox多选框实现单选效果
- 用CheckBox实现ListView单选效果
- ListView+CheckBox实现单选效果
- checkbox多选框实现单选效果
- RecyclerView之CheckBox实现单选效果
- GridView实现checkbox效果(单选效果)
- chckbox 实现单选效果(html)
- ListView + CheckBox实现单选、多选效果
- 使用checkbox实现单选效果 (模拟radio)
- checkbox 实现单选
- checkbox 实现单选
- 控制CheckBox实现单选
- jquery checkbox 实现单选
- listview+checkbox实现单选
- checkbox实现单选功能
- checkbox实现单选功能
- java web总结
- Yacc 与 Lex 快速入门
- struts2搭建
- [LeetCode78]Remove Duplicates from Sorted Array II
- 匝卜迪糯炕卜椅刑湛烦纤焦揭运焦
- checkbox 实现单选效果(html)
- spring资源2
- [LeetCode95]Search in Rotated Sorted Array II
- 各种实现队列的问题:链表实现,栈实现队列及队列实现栈
- 算法复杂度
- 斐波那契列不适合用递归法求解
- 查看mysql数据库连接数、并发数相关信息
- c++课程设计——班车管理系统
- jquery的attr方法禁用表单元素