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 相关文章推荐
用js计算页面执行时间的函数
Dec 07 Javascript
JavaScript中判断整字类型最简洁的实现方法
Nov 08 Javascript
解决Angular.Js与Django标签冲突的方案
Dec 20 Javascript
JavaScript中数组的各种操作的总结(必看篇)
Feb 13 Javascript
完美解决spring websocket自动断开连接再创建引发的问题
Mar 02 Javascript
利用Mongoose让JSON数据直接插入或更新到MongoDB
May 03 Javascript
js定时器+简单的动画效果实例
Nov 10 Javascript
Vue中props的使用详解
Jun 15 Javascript
详解Element-UI中上传的文件前端处理
Aug 07 Javascript
mpvue实现小程序签到金币掉落动画(api实现)
Oct 17 Javascript
jQuery实现简单飞机大战
Jul 05 jQuery
关于React Native使用axios进行网络请求的方法
Aug 02 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
咖啡冲泡指南 咖啡有哪些制作方式 单品咖啡 意式咖啡
2021/03/06 冲泡冲煮
PHP下用rmdir实现删除目录的三种方法小结
2008/04/20 PHP
win10环境PHP 7 安装配置【教程】
2016/05/09 PHP
JSQL SQLProxy 的 php 版本代码
2010/05/05 Javascript
js Form.elements[i]的使用实例
2011/11/13 Javascript
js实现在文本框光标处添加字符的方法介绍
2012/11/24 Javascript
完美兼容各大浏览器获取HTTP_REFERER方法总结
2014/06/24 Javascript
AngularJS入门教程之数据绑定原理详解
2016/11/02 Javascript
Bootstrap选项卡学习笔记分享
2017/02/13 Javascript
JS正则表达式验证密码格式的集中情况总结
2017/02/23 Javascript
AngulaJS路由 ui-router 传参实例
2017/04/28 Javascript
微信小程序tabbar不显示解决办法
2017/06/08 Javascript
JS判断非空至少输入两个字符的简单实现方法
2017/06/23 Javascript
微信小程序实现列表下拉刷新上拉加载
2020/07/29 Javascript
微信小程序入口场景的问题集合与相关解决方法
2019/06/26 Javascript
[01:39]2014DOTA2国际邀请赛 Newbee经理CU专访队伍火力全开
2014/07/15 DOTA
python创建列表并给列表赋初始值的方法
2015/07/28 Python
Python连接SQLServer2000的方法详解
2017/04/19 Python
Python获取本机所有网卡ip,掩码和广播地址实例代码
2018/01/22 Python
Python实现爬虫爬取NBA数据功能示例
2018/05/28 Python
从numpy数组中取出满足条件的元素示例
2019/11/26 Python
Python计算机视觉里的IOU计算实例
2020/01/17 Python
python 利用Pyinstaller打包Web项目
2020/10/23 Python
HTML5里的placeholder属性使用实例和美化显示效果的方法
2014/04/23 HTML / CSS
解释一下ArrayList Vector和LinkedList的实现和区别
2013/04/26 面试题
C语言中一个结构不能包含指向自己的指针吗
2012/05/25 面试题
介绍一下Linux内核的排队自旋锁
2014/08/27 面试题
高中生学习生活的自我评价
2013/10/09 职场文书
公务员职业生涯规划书范文  
2014/01/19 职场文书
模特大赛策划方案
2014/05/28 职场文书
社区文艺活动方案
2014/08/19 职场文书
年会邀请函范文
2015/01/30 职场文书
2015年车间管理工作总结
2015/07/23 职场文书
python简单验证码识别的实现过程
2021/06/20 Python
Java基础之线程锁相关知识总结
2021/06/30 Java/Android
MySql统计函数COUNT的具体使用详解
2022/08/14 MySQL