用srcElement實現添加效果

Java代碼 
<!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

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

說明
splice 方法可以移除從 start 位置開始的指定個數的元素並插入新元素,從而修改 arrayObj。返回值是一個由所移除的元素組成的新 Array 對象

作者“百威”
 

發佈留言