页面导航：首页 → 网络编程 → JavaScript → 表单特效 → 正文内容

用srcElement实现添加效果原创

发布：dxy 字体：[增加减小] 类型：原创

点击运行可以看到效果:

<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 全选提示:你可先修改部分代码,再按运行]

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>

[Ctrl+A 全选提示:你可先修改部分代码,再按运行]

blueidea斑竹回复，推荐

点击运行可以看到效果:

[Ctrl+A 全选提示:你可先修改部分代码,再按运行]

splice 方法
从一个数组中移除一个或多个元素，如果必要，在所移除元素的位置上插入新元素，返回所移除的元素。
arrayObj.splice(start, deleteCount, [item1[, item2[, . . . [,itemN]]]])
参数
arrayObj 必选项。一个 Array 对象。
start
必选项。指定从数组中移除元素的开始位置，这个位置是从 0 开始计算的。
deleteCount
必选项。要移除的元素的个数。
item1, item2,. . .,itemN
必选项。要在所移除元素的位置上插入的新元素。
说明
splice 方法可以移除从 start 位置开始的指定个数的元素并插入新元素，从而修改 arrayObj。返回值是一个由所移除的元素组成的新 Array 对象。

Tags：用srcElement实现添加效果