input:checkbox多选框实现单选效果跟radio一样_Javascript教程-查字典教程网
input:checkbox多选框实现单选效果跟radio一样
input:checkbox多选框实现单选效果跟radio一样
发布时间:2016-12-30 来源:查字典编辑
摘要:最近遇到一个小小的问题,就是有时候我们使用单选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>

相关阅读
推荐文章
猜你喜欢
附近的人在看
推荐阅读
拓展阅读
  • 大家都在看
  • 小编推荐
  • 猜你喜欢
  • 最新Javascript教程学习
    热门Javascript教程学习
    编程开发子分类