input:checkbox多选框实现单选效果跟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>