小记录：
1、input标签都有value属性；
2、input的id与label的for属性的名子相同就可以实现连动；
3、不加乱加空格，555~~
效果：
代码：
1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
2 <html xmlns="http://www.w3.org/1999/xhtml">
3 <head>
4 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
5 <title>选项</title>
6 <style type="text/css">
7 *{ margin:0; padding:0;}
8 .wraper{ margin:70px 0 0 80px;}
9 h2{ font-family:'Microsoft YaHei'; margin:10px 0;}
10 li{ list-style:none; height:30px; line-height:30px; vertical-align:middle; font-family:Tahoma, Geneva, sans-serif;}
11 li input,li label{ vertical-align:middle; margin-right:5px;}
12 #content{ width:500px; height:24px; line-height:24px;}
13 </style>
14 </head>
15
16 <body>
17 <script type="text/javascript">
18 window.onload=function(){
19 var oContent=document.getElementById('content');
20 var aCheckbox=document.getElementById('checkbox').getElementsByTagName('input');
21 var i=0;
22
23 for(i=0; i<aCheckbox.length; i++){
24 aCheckbox[i].onclick = function(){
25 if(this.checked == true){
26
27 if(oContent.value==''){
28 oContent.value+=this.value //如果oContent里面没有文字，第一个就不加逗句~~
29 }else{
30 oContent.value+= ',' +this.value; //如果oContent里有文字，第二个值前面加一个逗句。555~~逗句里不要乱敲空格啊，不然一会判断会不准~~
31 }
32
33 }else{
34
35 var arr = oContent.value.split(','); //arr来存放oContent文字内容。
36
37 for(i=0;i<arr.length;i++){
38
39 if(this.value==arr[i]){ //如果当前这个checkbox的值==数组里的某一项，就删掉这项。
40 arr.splice(i,1);
41 }
42 oContent.value = arr;
43 }
44 }
45
46 };
47 }
48 };
49 </script>
50 <div class="wraper">
51 <h2>哪些是你擅长的呢~~</h2>
52 <input type="text" id="content"/>
53 <ul id="checkbox">
54 <li>
55 <input type="checkbox" value="HTML" id="html" /><label for="html">HTML</label>
56 </li>
57 <li>
58 <input type="checkbox" value="CSS" id="css" /><label for="css">CSS</label>
59 </li>
60 <li>
61 <input type="checkbox" value="JavaScript" id="javascript" /><label for="javascript">JavaScript</label>
62 </li>
63 <li>
64 <input type="checkbox" value="PHP" id="php" /><label for="php">PHP</label>
65 </li>
66 <li>
67 <input type="checkbox" value="Java" id="java" /><label for="java">Java</label>
68 </li>
69 <li>
70 <input type="checkbox" value="C" id="c" /><label for="c">C</label>
71 </li>
72 <li>
73 <input type="checkbox" value="C++" id="c++" /><label for="c++">C++</label>
74 </li>
75 <li>
76 <input type="checkbox" value="MySQL" id="mysql" /><label for="mysql">MySQL</label>
77 </li>
78 </ul>
79 </div>
80 </body>
81 </html>
