一,checkbox全选反选全否
1.<!DOCTYPE html>
2.<html>
3. <head>
4. <meta charset="utf-8">
5. <title></title>
6. <script type="text/javascript">
7. function getCheckBox() {
8. var str = "";
9.
10. var music = document.getElementsByName("music");
11.
12. for (var i = 0; i < music.length; i++) {
13.
14. if (music[i].checked) {
15. str += music[i].value + ",";
16.
17. }
18. }
19. alert(str);
20. }
21.
22. function choose(type) {
23. var music = document.getElementsByName("music");
24. for (var i = 0; i < music.length; i++) {
25. if (type == 'all') {
26. music[i].checked = true;
27. } else if (type == 'no') {
28. music[i].checked = false;
29. } else if (type == 'fx') {
30. music[i].checked = !music[i].checked;
31. }
32. }
33. }
34. </script>
35. </head>
36.
37. <body>
38. <h1>百度音乐--热门歌曲</h1>
39. <input type="checkbox" name="music" value="1" />葫芦娃
40. <br />
41. <input type="checkbox" name="music" value="2" />小苹果
42. <br />
43. <input type="checkbox" name="music" value="3" />忐忑
44. <br />
45. <input type="checkbox" name="music" value="4" />滴答
46. <br />
47. <input type="checkbox" name="music" value="5" />当
48. <br />
49. <input type="checkbox" name="music" value="6" />李白
50. <br />
51. <input type="checkbox" name="music" value="7" />模特
52. <br />
53. <input type="checkbox" name="music" value="8" />老街
54. <br />
55. <input type="checkbox" name="music" value="9" />泡沫
56. <br />
57. <input type="checkbox" name="music" value="0" />上海滩
58. <br />
59. <input type="button" value="播放" onclick="getCheckBox();" />
60. <input type="button" value="全选" onclick="choose('all');" />
61. <input type="button" value="反选" onclick="choose('fx');" />
62. <input type="button" value="全否" onclick="choose('no');" />
63. </body>
64.
65.</html>
二,操作下拉列表
1.<!DOCTYPE html>
2.<html>
3.
4. <head>
5. <meta charset="utf-8">
6. <title></title>
7. <script type="text/javascript">
8. function testSelect() {
9.
10. var addr = document.getElementById("address");
11.
12.
13.
14.
15.
16.
17.
18.
19.
20.
21.
22. }
23.
24. function testSelectMultple() {
25. var fav = document.getElementById("fav");
26. for (var i = 0; i < fav.length; i++) {
27. if (fav[i].selected) {
28. alert(fav[i].value + ":" + fav[i].text);
29. }
30. }
31. }
32. </script>
33. </head>
34.
35. <body>
36. <h1>操作下拉列表</h1>
37. <input type="button" value="操作下拉列表(单选)" onclick="testSelect();" />
38. <input type="button" value="操作下拉列表(多选)" onclick="testSelectMultple();" />
39. <hr /> 户籍地址
40. <select id="address">
41. <option value="0">--请选择--</option>
42. <option value="aa">北京市</option>
43. <option value="bb">山东省</option>
44. <option value="cc">广西</option>
45. <option value="dd">广东</option>
46. <option value="ee">福建</option>
47. </select>省
48. <hr /> 爱好
49. <select id="fav" multiple="multiple">
50. <option value="11">邓紫棋</option>
51. <option value="22">范冰冰</option>
52. <option value="33">杨幂</option>
53. <option value="44">杨颖</option>
54. <option value="55">唐嫣</option>
55. </select>
56. </body>
57.
58.</html>