选择框checkbox练习
select练习
注意select的selected属性
1 <!DOCTYPE html>
2 <html xmlns="http://www.w3.org/1999/xhtml">
3 <head>
4 <title>正则表达式</title>
5 <script type="text/javascript">
6 function numkeydown() {
7 var k = window.event.keyCode;
8 if((k==9)||(k==13)||(k==46)||(k==8)||(k==189)||(k==109)
9 ||(k==190)||(k>=48&&k<=57)||(k>=96&&k<=105)||(k>=37&&k<=40))
10 { return true; }
11 else {
12 return false;
13 }
14 }
15 function judge(k)
16 {
17 if ((k == 9) || (k == 13) || (k == 46) || (k == 8) || (k == 189) || (k == 109)
18 || (k == 190) || (k >= 48 && k <= 57) || (k >= 96 && k <= 105) || (k >= 37 && k <= 40))
19 { return true; }
20 else {
21 return false;
22 }
23 }
24 function ONpasteDeal()
25 {
26 var text = window.clipboardData.getData("Text");
27 for(var i=0;i<text.length;i++)
28 {
29 var k = text.charCodeAt(i);
30 if (!judge(k))
31 return false;
32 }
33 return true;
34 }
35 //onkeydown="if(window.event.keyCode == 13) { window.event.keyCode = 9;}
36 var data = { "山东": ["济南", "德州", "潍坊"], "河南": ["郑州", "洛阳", "三门峡"], "辽宁": ["沈阳", "鞍山", "大连"] };
37 function loadProv()
38 {
39 var prov = document.getElementById("prov");
40 for(var key in data)
41 {
42 var option = document.createElement("option");
43 option.value = key;
44 option.innerText = key;
45 prov.appendChild(option);
46
47 }
48 //ResponsetoCity();
49 }
50 function ResponsetoCity()
51 {
52 var prov = document.getElementById("prov");
53
54 var city = document.getElementById("city");
55 //city.options.length = 0;
56 if (prov.value == "none")
57 return;
58 for (var i =city.childNodes.length-1; i >= 0; i--)
59 {
60 city.removeChild(city.childNodes[i]);
61 }
62 var key = prov.value;
63
64 for (var i in data[key])
65 {
66 var option=document.createElement("option");
67 option.innerText = data[key][i];
68 option.value = data[key][i];
69 city.appendChild(option);
70 }
71 }
72 function SelectAll()
73 {
74 var playlist = document.getElementById("selectdiv");
75 var input = playlist.getElementsByTagName("input");
76 for(var i=0;i<input.length;i++)
77 if (input[i].type == "checkbox") {
78 input[i].checked = "checked";
79 }
80 }
81 function NoSelectAll() {
82 var playlist = document.getElementById("selectdiv");
83 var input = playlist.getElementsByTagName("input");
84 for (var i = 0; i < input.length; i++)
85 if (input[i].type == "checkbox") {
86 input[i].checked = "";
87 }
88 }
89 function ReverseSelect() {
90 var playlist = document.getElementById("selectdiv");
91 var input = playlist.getElementsByTagName("input");
92 for (var i = 0; i < input.length; i++)
93 if (input[i].type == "checkbox") {
94 if (input[i].checked == true)
95 input[i].checked = "";
96 else input[i].checked = "checked";
97 }
98 }
99 </script>
100
101 </head>
102 <body bgcolor="blue" >
103 <select id="prov" onchange="ResponsetoCity()"><option>请选择省</option></select>
104 <select id="city"style="width:80px"></select><br/>
105 <input type="text"><input type="text"onpaste="return ONpasteDeal();"style="ime-mode:disabled;" onkeydown="return numkeydown();"/><br/>
106 <input type="text"><input type="text"style="text-align:right;ime-mode:disabled">
107 <br/><br/><br/><br/>
108 <div id="selectdiv" style="position:absolute;">
109 <input type="checkbox" id="p1" /><label for="p1">天蝎座</label><br />
110 <input type="checkbox" id="p2" /><label for="p2">水瓶座</label><br />
111 <input type="checkbox" id="p3" /><label for="p3">巨蟹座</label><br />
112 <input type="checkbox" id="p4" /><label for="p4">摩羯座</label><br />
113 <input type="checkbox" id="p5" /><label for="p5">双子座</label><br />
114 <input type="checkbox" id="p6" /><label for="p6">金牛座</label><br />
115 <input type="checkbox" id="p7" /><label for="p7">处女座</label><br />
116 <input type="checkbox" id="p8" /><label for="p8">白羊座</label><br />
117 <input type="checkbox" id="p9" /><label for="p9">射手座</label><br />
118 <input type="checkbox" id="p10" /><label for="p10">双鱼座</label><br />
119 <input type="checkbox" id="p11" /><label for="p11">天秤座</label><br />
120 <input type="checkbox" id="p12" /><label for="p12">狮子座</label><br />
121
122 <input type="button" value="全选" onclick="SelectAll()" />
123 <input type="button" value="全不选" onclick="NoSelectAll()" />
124 <input type="button" value="反选" onclick="ReverseSelect()" />
125 </div>
126 <div style="position:absolute;left:30%;width:30%;">
127 <select id="sel1" multiple="multiple" size="10" style="float:left;width:30%;">
128 <option value="add">添加</option>
129 <option value="print">打印</option>
130 <option value="delete">删除</option>
131 <option value="modify">修改</option>
132 <option value="look">查询</option>
133 <option value="cli">点击</option>
134 <option value="chag">改变</option>
135 <option value="away">抹去</option>
136 <option value="kill">杀死</option>
137 <option value="evt">肇事</option>
138 </select>
139 <div style="float:left">
140 <input type="button" value=">>" onclick="ToAll()" style="float:left;width:100%" />
141 <input type="button" value="<<" onclick="FromAll()" style="float:left;width:100%" />
142 <input type="button" value=" > " onclick="MoveFromTo()" style="float:left;width:100%" />
143 <input type="button" value=" < " onclick="MoveToFrom()" style="float:left;width:100%" />
144
145 </div>
146 <select id="sel2" multiple="multiple" size="10" style="float:left;width:30%;"></select>
147 </div>
148 <script type="text/javascript">
149 function MoveFromTo()
150 {
151 var sel = document.getElementById("sel1");
152 var sel2 = document.getElementById("sel2");
153 for (var i = 0; i < sel.childNodes.length; i++)
154 {
155 if(sel.childNodes[i].selected==true)
156 {
157 var option = sel.childNodes[i];
158 option.selected = false;
159 sel2.appendChild(option);
160 i--;
161 }
162 }
163 }
164 function MoveToFrom()
165 {
166 var sel = document.getElementById("sel1");
167 var sel2 = document.getElementById("sel2");
168 for (var i = 0; i < sel2.childNodes.length; i++) {
169 if (sel2.childNodes[i].selected==true) {
170 var option = sel2.childNodes[i];
171 option.selected = false;
172 sel.appendChild(option);
173 i--;
174 }
175 }
176 }
177 var ToAll = function () {
178 var sel = document.getElementById("sel1");
179 var sel3 = document.getElementById("sel2");
180
181 for (; sel.childNodes.length > 0;)
182 {
183 var option = sel.childNodes[0];
184 option.selected = false;
185 sel3.appendChild(option);
186
187 }
188 }
189 var FromAll = function () {
190 var sel = document.getElementById("sel1");
191 var sel3 = document.getElementById("sel2");
192
193 for (; sel3.childNodes.length>0;) {
194 var option = sel3.childNodes[0];
195 option.selected = false;
196 sel1.appendChild(option);
197
198 }
199 }
200 </script>
201 </body>
202 </html>
时间： 2025-01-05 14:35:02