checbox复选框实现radio单选框的单选功能

快乐打工仔 分类:实例代码

checbox复选框实现radio单选框的单选功能属于前端实例代码,有关更多实例代码大家可以查看

复选框可以选中多个,单选按钮只能够选中一个。

下面分享一个使用复选框模拟单选按钮的效果,也就是复选框只能有一个同时被选中。

代码实例如下:

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="author" content="http://www.pipipi.net/" />
<title>犀牛前端部落</title>
<style>
span, input{
  float:left;
}
input{
  width:14px;
  height:14px;
}
span{
  margin-right:20px;
}
</style>
<script src="http://libs.baidu.com/jquery/1.9.0/jquery.js"></script> 
<script> 
$(function(){ 
  $(":checkbox").click(function(){ 
    if($(this).attr("checked")!=undefined){ 
      $(this).siblings().attr("checked",false); 
    } 
  }) 
}) 
</script>
</head>
<body>
<div>
  <input type="checkbox" />
  <input type="checkbox" />
  <input type="checkbox" />
  <input type="checkbox" />
  <input type="checkbox" />
  <input type="checkbox" />
</div>
</body>
</html>

上面的代码实现了我们想要的功能,下面介绍一下它的实现过程。

一.代码注释:

(1).$(function(){}),文档结构完全加载完毕再去执行函数中的代码。

(2).$(":checkbox").click(function(){}),为checkbox复选框注册click事件处理函数。

(3).if($(this).attr("checked")!=undefined){},判断当前复选框是否被选中,因为如果复选框没有被选中attr()函数的返回值是undefined,如果选中的话返回值checked。

(4).$(this).siblings().attr("checked",false),如果当前复选框被选中,那么其兄弟复选框全部取消选中。

二.相关阅读:

(1).attr()参阅jQuery attr()一章节。 

(2).siblings()参阅jQuery siblings()一章节。

checbox复选框实现radio单选框的单选功能,这样的场景在实际项目中还是用的比较多的,关于checbox复选框实现radio单选框的单选功能就介绍到这了。

回复

我来回复
  • 暂无回复内容