input:checkbox多选框实现单选效果
来源:互联网 发布:mac版千牛无法登陆 编辑:程序博客网 时间:2024/05/20 02:28
最近遇到一个小小的问题,就是有时候我们使用单选radio的时候,会发现当我们选中一个之后,再也无法一个都不选了,即选中后没有取消的功能,此时便想到了功能强大的checkbox,但他是多选,怎么才能让他变成单选,效果跟radio一样呢,本菜鸟就自己写了个小程序,代码很简单,只有四行。
废话不多说,直接代码:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><script src="js/jquery-1.8.3.min.js" type="text/javascript" language="javascript"></script><title>无标题文档</title><script type="text/javascript">$(function(){$(":checkbox").click(function(){if($(this).attr("checked")!=undefined){$(this).siblings().attr("checked",false);$(this).attr("checked",true);}});});</script><style>span,input{float:left;}input{ width:14px; height:14px;}span{ margin-right:20px;}</style></head><body><div> <input type="checkbox" /><span>1</span> <input type="checkbox" /><span>2</span> <input type="checkbox" /><span>3</span> <input type="checkbox" /><span>4</span> <input type="checkbox" /><span>5</span> <input type="checkbox" /><span>6</span> <input type="text" /><span>7</span></div></body></html>
有任何交流和指教,请联系:http://www.yinmu.me
- input:checkbox多选框实现单选效果
- checkbox多选框实现单选效果
- checkbox实现单选按钮效果
- checkbox 实现单选效果(html)
- 用CheckBox实现ListView单选效果
- ListView+CheckBox实现单选效果
- RecyclerView之CheckBox实现单选效果
- GridView实现checkbox效果(单选效果)
- ListView + CheckBox实现单选、多选效果
- 使用checkbox实现单选效果 (模拟radio)
- checkbox 实现单选
- checkbox 实现单选
- JS实现多选框CheckBox单选问题
- 控制CheckBox实现单选
- jquery checkbox 实现单选
- listview+checkbox实现单选
- checkbox实现单选功能
- checkbox实现单选功能
- MBProgressHUD扩展(自动隐藏,类方法显示文本)
- POJ 1125 Stockbroker Grapevine
- 【解决方法】Oracle一次插入多条记录
- linux下的线程(一)
- hdu3038(并查集)
- input:checkbox多选框实现单选效果
- hdu 4607 Park Visit dfs
- 该死的KPI
- 通过mvn命令行将第三方jar包上传到Nexus服务器上
- Lucene的检索优化(二)--Hits的改进
- __cdecl __stdcall区别
- word 改变表格,单元格的背景颜色
- QT中QWidget、QDialog及QMainWindow的区别
- Extjs4 ajax请求在firebug提示aborted