一、需求
最近客户需要将他们的房屋系统标签做成点选方式的，于是自己就简单整理了下；
二、用到类库和函数
jquery
$(this).toggleClass(特换CSS样式) //用来切换CSS类样式
$.inArray(要查找的字符串,数组集) //jquery在数组中查找是否存在相应内容 返回-1未找到 或者返回数组下标，从0开始
$('DOM元素').each(function(k,v){ }); //遍历DOM元素 k为元素个数 v为DOM元素
$.each(数组集,function(k,v){ }); //遍历数组集 k为键 v为值
三、实现方式
1、（简陋方式）通过给每个点击的标签增加class="on"样式，然后遍历样式获取点选内容
HTML代码段：
<div id="mybt">
<input type="text" id="bt" name="bt" style="width:500px" /><br><br>
<span>精装修家</span> <span>电齐全</span> <span>押一付一</span> <span>单身公寓</span> <span>邻近地铁</span> <span>市政供暖</span>
</div>CSS代码段：
<style type="text/css">
#mybt span{display:inline-block;width:4em;padding:5px 8px;margin:3px;border:1px solid #ccc;cursor:pointer}
.on{display:inline-block;width:4em;padding:5px 8px;margin:3px;border:1px solid #ccc;cursor:pointer;background-color:#6FD4F8;}
</style>JS代码段（引入jquery类）：
<script type="text/javascript">
//选择标签
$(function(){
//每次点击标题在数字中增加或者删除一个标签
$('#mybt span').click(function(){
//获取点击的当前标签内容
var s = $(this).html();
//切换点击样式
$(this).toggleClass('on');
//清理文本框
$('#bt').val('');
//遍历当前被选择的标签
var str = '';
$('#mybt span.on').each(function(k,v){
str += $(v).html()+',';
//$('#bt').val($(v).html()+',');
});
//显示到文本框
$('#bt').val(str);
});
});
</script>2、(推荐方式)通过点击将选择的标签存入数组中，然后对其进行增加删除，最后将数组的内容输出到显示的文本框中及为最终点选的内容
HTML代码段：
<body>
<div id="mybt">
<input type="text" id="bt" name="bt" style="width:500px" /><br><br>
<span>精装修家</span> <span>电齐全</span> <span>押一付一</span> <span>单身公寓</span> <span>邻近地铁</span> <span>市政供暖</span>
</div>CSS代码段：
<style type="text/css">
#mybt span{display:inline-block;width:4em;padding:5px 8px;margin:3px;border:1px solid #ccc;cursor:pointer}
.on{display:inline-block;width:4em;padding:5px 8px;margin:3px;border:1px solid #ccc;cursor:pointer;background-color:#6FD4F8;}
</style>JS代码段（引入JQUERY类）：
<script type="text/javascript">
//选择标签
$(function(){
//定义一个从来存储标签的数组
var arrStr = new Array();
//每次点击标题在数字中增加或者删除一个标签
$('#mybt span').click(function(){
var t = $('#bt').val(); //获取text中已经存的标签内容
var s = $(this).html(); //获取点击的当前标签内容
//如果当前点击的标签存在于标签数组数组中就删除 不存在就新增（目的点击增加删除切换）
var num = $.inArray(s,arrStr); /* $.inArray(要查找的字符串,数组集) jquery数组查找函数 */
//如果$.inArray()返回负数表示数组中不存在，否则返回字符串存在于数组中的下标 0开始
if(num>'-1'){
//点击去色
$(this).removeClass("on");
//剔除标签
arrStr.splice(num,1);
}else{
//点击上色
$(this).addClass("on");
//数组中追加标签
arrStr.push(s);
}
//每次点击情况标签显示框
$('#bt').val('');
//遍历出来标签数组 jquery遍历数组 $.each(数组集,function(k,v){……});
$.each(arrStr,function(k,v){
//获取原来的标签数据
var oldData = $('#bt').val() + v;
//为标签添加分割符号
if(k != arrStr.length-1) oldData += ',';
//将最终数据遍历到显示框中
$('#bt').val(oldData);
});
});
});
</script>源码下载：
http://pan.baidu.com/s/1i3mp92l