用srcElement实现添加效果

原创

mb64660286caedc 2023-05-19 00:02:11 博主文章分类：javascript ©著作权

文章标签 javascript ViewUI html .net 数组 文章分类 Html/CSS 前端开发

©著作权归作者所有：来自51CTO博客作者mb64660286caedc的原创作品，请联系作者获取转载授权，否则将追究法律责任

<!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">   
<!--   
.l {FONT-SIZE:10pt;}   
-->   
</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>

详细出处参考：http://www.jb51.net/article/566.htm

splice 方法

从一个数组中移除一个或多个元素，如果必要，在所移除元素的位置上插入新元素，返回所移除的元素。

arrayObj.splice(start, deleteCount, [item1[, item2[, . . . [,itemN]]]])

参数

arrayObj 必选项。一个 Array 对象。

start

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

deleteCount

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

item1, item2,. . .,itemN

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

说明