标签:
关于点选框的简单示例:
这个点选框的示例不是input多选框,而是一个div里面嵌套一个子div元素。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>jump</title>
<script src="js/jquery-2.1.4.js"></script>
<style>
.select{float:left;margin:40px 40px;}
.boss{width:10px;height:10px;border:2px solid #666;}
.boss div{width:8px;height:8px;background: #666;margin: 1px;}
</style>
<script>
$(function(){
var $boss=$(‘.boss‘);
$boss.click(function(){
$(".boss").css("border","2px solid #666")
.children().css("background","#666");
$(this).css("border","2px solid red")
.children().css("background","red");
})
})
</script>
</head>
<body>
<div id="head">
<div class="select">
<div class="boss"><div></div></div>
</div>
<div class="select">
<div class="boss"><div></div></div>
</div>
<div class="select">
<div class="boss"><div></div></div>
</div>
</div>
</body>
</html>
选框的形状多种多样,可按自己的要求修改具体的样式。
标签:
原文地址:http://www.cnblogs.com/treeclass/p/4553918.html