手机
当前位置:查字典教程网 >编程开发 >Javascript教程 >input:checkbox多选框实现单选效果跟radio一样
input:checkbox多选框实现单选效果跟radio一样
摘要:最近遇到一个小小的问题,就是有时候我们使用单选radio的时候,会发现当我们选中一个之后,再也无法一个都不选了,即选中后没有取消的功能,此时...

最近遇到一个小小的问题,就是有时候我们使用单选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>

【input:checkbox多选框实现单选效果跟radio一样】相关文章:

javascript实现树形菜单的方法

限制复选框的最大可选数

JavaScript实现列表分页功能特效

JS+CSS实现的拖动分页效果实例

jQuery实现表格行上下移动和置顶效果

利用js实现禁止复制文本信息

JavaScript实现广告的关闭与显示效果实例

javascript中DOM复选框选择用法实例

javascript实现带下拉子菜单的导航菜单效果

COOL而实用的动态效果

精品推荐
分类导航