用srcElement实现添加效果原创

原创更新时间：2006年08月18日 00:00:00 原创作者：

<!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=gb2312" /> <title>无标题文档</title> <style type="text/css">  </style> <script language="javascript"> function addthis(){ var srcE=event.srcElement?event.srcElement:event.target; var thev=srcE.value; //alert(thev); var s=document.forms[0].likes.value.indexOf(thev) if(s==-1){ document.forms[0].likes.value+=thev+","; }} </script> </head> <body> <form name="form1">   <font color="#666666">   <textarea name="likes" cols="40" rows="2" id="textarea9" style="font-size: 9pt;padding:4px;"></textarea>   </font>   <table border="0" width="100%" cellspacing="0" cellpadding="0" >     <tr>       <td><input name="activity" type="checkbox" value="电脑/网络" id="activity_1" onclick="javascript:addthis()" />           <label for="activity_1" class="l">电脑/网络</label></td>       <td><label for="activity_2" class="l">         <input name="activity2" type="checkbox" value="电子游戏" id="activity_2" onclick="javascript:addthis()"/>         电子游戏</label></td>       <td><input name="activity2" type="checkbox" value="体育运动" id="activity_3" onclick="javascript:addthis()" />           <label for="activity_3" class="l">体育运动</label></td>       <td><input name="activity2" type="checkbox" value="饮酒" id="activity_4" />           <label for="activity_4" class="l">饮酒</label></td>       <td><input name="activity2" type="checkbox" value="品茗" id="activity_5" />           <label for="activity_5" class="l">品茗</label></td>     </tr>     <tr>       <td><input name="activity2" type="checkbox" value="弹琴" id="activity_6" />           <label for="activity_6" class="l">弹琴</label></td>       <td><input name="activity2" type="checkbox" value="看电影/电视" id="activity_7" />           <label for="activity_7" class="l">看电影/电视</label></td>       <td><input name="activity2" type="checkbox" value="下棋/打牌" id="activity_8" />           <label for="activity_8" class="l">下棋/打牌</label></td>       <td><input name="activity2" type="checkbox" value="观光旅游" id="activity_9" />           <label for="activity_9" class="l">观光旅游</label></td>       <td><input name="activity2" type="checkbox" value="逛街购物" id="activity_10" />           <label for="activity_10" class="l">逛街购物</label></td>     </tr>     <tr>       <td><input name="activity2" type="checkbox" value="阅读" id="activity_11" />           <label for="activity_11" class="l">阅读</label></td>       <td><input name="activity2" type="checkbox" value="写作" id="activity_12" />           <label for="activity_12" class="l">写作</label></td>       <td><input name="activity2" type="checkbox" value="烹调" id="activity_13" />           <label for="activity_13" class="l">烹调</label></td>       <td><input name="activity2" type="checkbox" value="舞会/卡拉OK" id="activity_14" />           <label for="activity_14" class="l">舞会/卡拉OK</label></td>       <td><input name="activity2" type="checkbox" value="健身/武术" id="activity_15" />           <label for="activity_15" class="l">健身/武术</label></td>     </tr>     <tr>       <td><input name="activity2" type="checkbox" value="水上活动" id="activity_16" />           <label for="activity_16" class="l">水上活动</label></td>       <td><input name="activity2" type="checkbox" value="文艺表演" id="activity_17" />           <label for="activity_17" class="l">文艺表演</label></td>       <td><input name="activity2" type="checkbox" value="18" id="activity_18" />           <label for="activity_18" class="l">聊天</label></td>       <td><input name="activity2" type="checkbox" value="19" id="activity_19" />           <label for="activity_19" class="l">家事/手工艺　</label></td>       <td><input name="activity2" type="checkbox" value="20" id="activity_20" />           <label for="activity_20" class="l">书法/绘画</label></td>     </tr>     <tr>       <td><input name="activity2" type="checkbox" value="21" id="activity_21" />           <label for="activity_21" class="l">储蓄/投资</label></td>       <td><input name="activity2" type="checkbox" value="22" id="activity_22" />           <label for="activity_22" class="l">养宠物</label></td>       <td><input name="activity2" type="checkbox" value="23" id="activity_23" />           <label for="activity_23" class="l">听音乐</label></td>       <td><input name="activity2" type="checkbox" value="24" id="activity_24" />           <label for="activity_24" class="l">各种收集活动　</label></td>       <td><input name="activity2" type="checkbox" value="25" id="activity_25" />           <label for="activity_25" class="l">摄影/艺术创作</label></td>     </tr>   </table> </form> </body> </html>

[Ctrl+A 全选注:引入外部Js需再刷新一下页面才能执行]

2006-08-21可以自己检测，不要每个checkbox加事件,删除功能没有实现

<!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=gb2312" />  <title>无标题文档</title>  <style type="text/css">    </style>  <script language="javascript">  function addthis(){  var srcE=event.srcElement?event.srcElement:event.target; if((srcE.tagName=="INPUT")&&(srcE.type.toLowerCase()=="checkbox")){ var thev=srcE.value; var theid=srcE.id; //alert(theid); if(theid.indexOf('xinge')!=-1){ thetag="xinge"; }else{ thetag="likes"; } //alert(thetag); switch(thetag){ case "likes": var s=document.forms[0].likes.value.indexOf(thev); if(s==-1){  document.forms[0].likes.value+=thev+",";  } break; case "xinge": var s=document.forms[0].xinge.value.indexOf(thev); if(s==-1){  document.forms[0].xinge.value+=thev+",";  } break; } }} document.onmousedown=addthis; </script>  </head>  <body>  <form name="form1"><textarea name="likes" cols="40" rows="8" id="textarea9" style="font-size: 9pt;padding:4px;"></textarea>  <textarea name="xinge" cols="40" rows="8" id="textarea9" style="font-size: 9pt;padding:4px;"></textarea>   <table border="0" width="100%" cellspacing="0" cellpadding="0" >      <tr>       <td colspan="5">兴趣爱好</td>     </tr>     <tr>        <td><input name="activity" type="checkbox" value="电脑/网络" id="activity_1" />            <label for="activity_1" class="l">电脑/网络</label></td>        <td><label for="activity_2" class="l">          <input name="activity2" type="checkbox" value="电子游戏" id="activity_2"/>          电子游戏</label></td>        <td><input name="activity2" type="checkbox" value="体育运动" id="activity_3" />            <label for="activity_3" class="l">体育运动</label></td>        <td><input name="activity2" type="checkbox" value="饮酒" id="activity_4" />            <label for="activity_4" class="l">饮酒</label></td>        <td><input name="activity2" type="checkbox" value="品茗" id="activity_5" />            <label for="activity_5" class="l">品茗</label></td>      </tr>      <tr>        <td><input name="activity2" type="checkbox" value="弹琴" id="activity_6" />            <label for="activity_6" class="l">弹琴</label></td>        <td><input name="activity2" type="checkbox" value="看电影/电视" id="activity_7" />            <label for="activity_7" class="l">看电影/电视</label></td>        <td><input name="activity2" type="checkbox" value="下棋/打牌" id="activity_8" />            <label for="activity_8" class="l">下棋/打牌</label></td>        <td><input name="activity2" type="checkbox" value="观光旅游" id="activity_9" />            <label for="activity_9" class="l">观光旅游</label></td>        <td><input name="activity2" type="checkbox" value="逛街购物" id="activity_10" />            <label for="activity_10" class="l">逛街购物</label></td>      </tr>      <tr>        <td><input name="activity2" type="checkbox" value="阅读" id="activity_11" />            <label for="activity_11" class="l">阅读</label></td>        <td><input name="activity2" type="checkbox" value="写作" id="activity_12" />            <label for="activity_12" class="l">写作</label></td>        <td><input name="activity2" type="checkbox" value="烹调" id="activity_13" />            <label for="activity_13" class="l">烹调</label></td>        <td><input name="activity2" type="checkbox" value="舞会/卡拉OK" id="activity_14" />            <label for="activity_14" class="l">舞会/卡拉OK</label></td>        <td><input name="activity2" type="checkbox" value="健身/武术" id="activity_15" />            <label for="activity_15" class="l">健身/武术</label></td>      </tr>      <tr>       <td colspan="5">性格：</td>     </tr>     <tr>        <td><input name="activity2" type="checkbox" value="活泼" id="xinge_16" />            <label for="xinge_16" class="l">活泼</label></td>        <td><input name="activity2" type="checkbox" value="尖刻" id="xinge_17" />            <label for="xinge_17" class="l">尖刻</label></td>        <td><input name="activity2" type="checkbox" value="自闭" id="xinge_18" />            <label for="xinge_18" class="l">自闭</label></td>        <td><input name="activity2" type="checkbox" value="等等" id="xinge_19" />            <label for="xinge_19" class="l">等等　</label></td>        <td><input name="activity2" type="checkbox" value="外向" id="xinge_20" />            <label for="xinge_20" class="l">外向</label></td>      </tr>    </table>  </form>  </body>  </html>

[Ctrl+A 全选注:引入外部Js需再刷新一下页面才能执行]

blueidea斑竹回复，推荐

<!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=gb2312" />   <title>无标题文档</title>   <style type="text/css">      </style>   <script language="javascript">   var likes=new Array(); xinge=new Array(); function addthis(e){   var e, srcE, op, opt, i;   e=window.event?window.event:e;   srcE=e.srcElement?e.srcElement:e.target;   if(!srcE)return;   if(String(srcE.tagName).toLowerCase()!="input"||String(srcE.type).toLowerCase()!="checkbox")return;   if(srcE.id.indexOf("xinge")!=-1){ op=xinge; opt=document.forms[0].xinge }else{ op=likes; opt=document.forms[0].likes; }   if(srcE.checked){     i=-1;     while(op[++i])if(op[i]==srcE.value)return;     op[i]=srcE.value;   }else{     i=-1;     while(op[++i])if(op[i]==srcE.value){op.splice(i,1);i--;}   }   opt.value=op; }  document.onkeydown=document.onchange=document.onclick=addthis;  </script>   </head>   <body>   <form name="form1"><textarea name="likes" cols="40" rows="8" id="textarea9" style="font-size: 9pt;padding:4px;"></textarea>   <textarea name="xinge" cols="40" rows="8" id="textarea9" style="font-size: 9pt;padding:4px;"></textarea>    <table border="0" width="100%" cellspacing="0" cellpadding="0" >       <tr>        <td colspan="5">兴趣爱好</td>      </tr>      <tr>         <td><input name="activity" type="checkbox" value="电脑/网络" id="activity_1" />             <label for="activity_1" class="l">电脑/网络</label></td>         <td><label for="activity_2" class="l">           <input name="activity2" type="checkbox" value="电子游戏" id="activity_2"/>           电子游戏</label></td>         <td><input name="activity2" type="checkbox" value="体育运动" id="activity_3" />             <label for="activity_3" class="l">体育运动</label></td>         <td><input name="activity2" type="checkbox" value="饮酒" id="activity_4" />             <label for="activity_4" class="l">饮酒</label></td>         <td><input name="activity2" type="checkbox" value="品茗" id="activity_5" />             <label for="activity_5" class="l">品茗</label></td>       </tr>       <tr>         <td><input name="activity2" type="checkbox" value="弹琴" id="activity_6" />             <label for="activity_6" class="l">弹琴</label></td>         <td><input name="activity2" type="checkbox" value="看电影/电视" id="activity_7" />             <label for="activity_7" class="l">看电影/电视</label></td>         <td><input name="activity2" type="checkbox" value="下棋/打牌" id="activity_8" />             <label for="activity_8" class="l">下棋/打牌</label></td>         <td><input name="activity2" type="checkbox" value="观光旅游" id="activity_9" />             <label for="activity_9" class="l">观光旅游</label></td>         <td><input name="activity2" type="checkbox" value="逛街购物" id="activity_10" />             <label for="activity_10" class="l">逛街购物</label></td>       </tr>       <tr>         <td><input name="activity2" type="checkbox" value="阅读" id="activity_11" />             <label for="activity_11" class="l">阅读</label></td>         <td><input name="activity2" type="checkbox" value="写作" id="activity_12" />             <label for="activity_12" class="l">写作</label></td>         <td><input name="activity2" type="checkbox" value="烹调" id="activity_13" />             <label for="activity_13" class="l">烹调</label></td>         <td><input name="activity2" type="checkbox" value="舞会/卡拉OK" id="activity_14" />             <label for="activity_14" class="l">舞会/卡拉OK</label></td>         <td><input name="activity2" type="checkbox" value="健身/武术" id="activity_15" />             <label for="activity_15" class="l">健身/武术</label></td>       </tr>       <tr>        <td colspan="5">性格：</td>      </tr>      <tr>         <td><input name="activity2" type="checkbox" value="活泼" id="xinge_16" />             <label for="xinge_16" class="l">活泼</label></td>         <td><input name="activity2" type="checkbox" value="尖刻" id="xinge_17" />             <label for="xinge_17" class="l">尖刻</label></td>         <td><input name="activity2" type="checkbox" value="自闭" id="xinge_18" />             <label for="xinge_18" class="l">自闭</label></td>         <td><input name="activity2" type="checkbox" value="等等" id="xinge_19" />             <label for="xinge_19" class="l">等等　</label></td>         <td><input name="activity2" type="checkbox" value="外向" id="xinge_20" />             <label for="xinge_20" class="l">外向</label></td>       </tr>     </table>   </form>   </body>   </html>

[Ctrl+A 全选注:引入外部Js需再刷新一下页面才能执行]

splice 方法
从一个数组中移除一个或多个元素，如果必要，在所移除元素的位置上插入新元素，返回所移除的元素。
arrayObj.splice(start, deleteCount, [item1[, item2[, . . . [,itemN]]]])

参数
arrayObj 必选项。一个 Array 对象。

start

必选项。指定从数组中移除元素的开始位置，这个位置是从 0 开始计算的。

deleteCount

必选项。要移除的元素的个数。

item1, item2,. . .,itemN

必选项。要在所移除元素的位置上插入的新元素。

说明
splice 方法可以移除从 start 位置开始的指定个数的元素并插入新元素，从而修改 arrayObj。返回值是一个由所移除的元素组成的新 Array 对象。

用srcElement实现添加效果

只能输入小于最大数且是正整数的脚本
只能输入小于最大数且是正整数的脚本...
2006-12-12
文本框获得焦点和失去焦点的判断代码
今天想介绍一下文本框获得焦点和失去焦点的两种方法，需要的朋友可以参考下
2012-03-03
js监听表单value的修改同步问题，跨浏览器支持
今天同事测试发现项目中一个小bug，然后我负责解决。研究了不短的时间，终于搞定了，有点激动。呵呵。拿出来与大家分享。
2009-12-12
输入数量和价格自动计算输出金额的js代码
通过输入数量和价格自动计算输出金额的代码，主要用于购物网站，需要的朋友可以参考下
2013-03-03
一款不错的键盘密码输入js程序
一款不错的键盘密码输入js程序...
2007-03-03
默认让页面的第一个控件选中的javascript代码
当页面上面显示了一个表单后，通常焦点并不是放在第一个控件上面，只需要一点通常的脚本就可以实现这个效果。
2009-12-12
javascript options属性集合操作代码
javascript options属性集合操作代码，一般情况需要控制option的朋友朋友需要了解的知识。
2009-12-12
让html的text输入框只能输入数字和1个小数点(0-59之间可改)
今天有同事需要这个功能，主要是限制用户输入不符合规范的数字与小数点导致不好计算价格问题，特整理了下面的代码，需要的朋友可以参考下。
2011-11-11
js文本中搜索关键词输入效果
js文本中搜索关键词输入效果...
2007-10-10
工作中常用到的JS表单验证代码(包括例子)
下面的代码是对一些表单经常需要验证的一些函数，方便大家使用。
2010-11-11