input:checkbox多选框实现单选效果跟radio一样


Posted in Javascript onJune 16, 2014

最近遇到一个小小的问题,就是有时候我们使用单选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>
Javascript 相关文章推荐
E3 tree 1.6在Firefox下显示问题的修复方法
Jan 30 Javascript
详解js私有作用域中创建特权方法
Jan 25 Javascript
谈谈JavaScript中浏览器兼容问题的写法小议
Dec 17 Javascript
在Vue中使用echarts的实例代码(3种图)
Jul 10 Javascript
Angularjs的启动过程分析
Jul 18 Javascript
angular2+node.js express打包部署的实战
Jul 27 Javascript
JS中的Replace()传入函数时的用法详解
Sep 11 Javascript
vue-cli的eslint相关用法
Sep 29 Javascript
vue2.0 + element UI 中 el-table 数据导出Excel的方法
Mar 02 Javascript
关于vue中 $emit的用法详解
Apr 12 Javascript
基于vue+element实现全局loading过程详解
Jul 10 Javascript
javascript canvas时钟模拟器
Jul 13 Javascript
Jquery动态添加及删除页面节点元素示例代码
Jun 16 #Javascript
纯js实现div内图片自适应大小(已测试,兼容火狐)
Jun 16 #Javascript
火狐下input焦点无法重复获取问题的解决方法
Jun 16 #Javascript
两种方法实现在HTML页面加载完毕后运行某个js
Jun 16 #Javascript
jquery实现在页面加载完毕后获取图片高度或宽度
Jun 16 #Javascript
jQuery实现简单网页遮罩层/弹出层效果兼容IE6、IE7
Jun 16 #Javascript
jquery网页回到顶部效果(图标渐隐,自写)
Jun 16 #Javascript
You might like
PHP实现非阻塞模式的方法分析
2018/07/26 PHP
laravel自定义分页的实现案例offset()和limit()
2019/10/15 PHP
Javascript 继承机制的实现
2009/08/12 Javascript
javascript下arguments,caller,callee,call,apply示例及理解
2009/12/24 Javascript
jquery多浏览器捕捉回车事件代码
2010/06/22 Javascript
prettify 代码高亮着色器google出品
2010/12/28 Javascript
基于jquery的可多选的下拉列表框
2012/07/20 Javascript
javascript生成随机颜色示例代码
2014/05/05 Javascript
JQuery插件iScroll实现下拉刷新,滚动翻页特效
2014/06/22 Javascript
javascript arguments使用示例
2014/12/16 Javascript
jQuery实现强制cookie过期方法汇总
2015/05/22 Javascript
jQuery中的通配符选择器使用总结
2016/05/30 Javascript
详解Node.js 命令行程序开发教程
2017/06/07 Javascript
SVG动画vivus.js库使用小结(实例代码)
2017/09/14 Javascript
vue-cli之router基本使用方法详解
2017/10/17 Javascript
用图片替换checkbox原始样式并实现同样的功能
2018/11/15 Javascript
Javascript摸拟自由落体与上抛运动原理与实现方法详解
2020/04/08 Javascript
Python字典实现简单的三级菜单(实例讲解)
2017/07/31 Python
Python测试人员需要掌握的知识
2018/02/08 Python
解决Python的str强转int时遇到的问题
2018/04/09 Python
Python实现简单石头剪刀布游戏
2021/01/20 Python
更新修改后的Python模块方法
2019/03/03 Python
python binascii 进制转换实例
2019/06/12 Python
python实现布隆过滤器及原理解析
2019/12/08 Python
Python 使用 prettytable 库打印表格美化输出功能
2019/12/26 Python
在 Python 中使用 MQTT的方法
2020/08/18 Python
只要五步 就可以用HTML5/CSS3快速制作便签贴特效(图)
2012/06/04 HTML / CSS
墨西哥巴士车票在线购买:ClickBus
2018/03/27 全球购物
servlet面试题
2012/08/20 面试题
学生会宣传部部长竞选演讲稿
2014/04/25 职场文书
省级优秀班集体申报材料
2014/05/25 职场文书
殡葬服务心得体会
2014/09/11 职场文书
代理人委托书
2014/09/16 职场文书
举起手来观后感
2015/06/09 职场文书
同事离别感言
2015/08/04 职场文书
用javascript制作qq注册动态页面
2021/04/14 Javascript