一，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.						//如果是radio，直接在这添加一个break
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.				//				alert(addr.value);
13.				//				addr.value = 'ff';
14.				//获取下拉列表的选择项
15.				//				var os = addr.options;
16.				//				for (var i = 0; i < os.length; i++) {
17.				//					var o = os[i];
18.				//					alert(o.text + ":" + o.value);
19.				//				}
20.				//获取下拉列表的被选中项的索引
21.				//				alert(addr.options[addr.selectedIndex].value);
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>

JavaScript详解（8.CheckBox.select正选反选的操作）

文章目录

一，checkbox全选反选全否

二，操作下拉列表

猜你喜欢