📄 7-16.html

📁 文件是《精通Javascript+jQuery》的书中实例

💻 HTML

字号:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<title>多选项</title>
<style>
<!--
form{
	padding:0px; margin:0px;
	font:14px Arial;
}
p{
	padding:2px; margin:0px;
}
-->
</style>
<script language="javascript">
function changeBoxes(action){
	var oForm = document.forms["myForm1"];
	var oCheckBox = oForm.hobby;
	for(var i=0;i<oCheckBox.length;i++)		//遍历每一个选项
		if(action<0)							//反选
			oCheckBox[i].checked = !oCheckBox[i].checked;
		else			//action为1是则全选，为0时则全不选
			oCheckBox[i].checked = action;
}
</script>
</head>
<body>
<form method="post" name="myForm1" action="addInfo.aspx">
您喜欢做的事情：
<p>
	<input type="checkbox" name="hobby" id="ball" value="ball">
	<label for="ball">打球</label>
</p>
<p>
	<input type="checkbox" name="hobby" id="TV" value="TV">
	<label for="TV">看电视</label>
</p>
<p>
	<input type="checkbox" name="hobby" id="net" value="net">
	<label for="net">上网</label>
</p>
<p>
	<input type="checkbox" name="hobby" id="book" value="book">
	<label for="book">看书</label>
</p>
<p>
	<input type="checkbox" name="hobby" id="trip" value="trip">
	<label for="trip">旅游</label>
</p>
<p>
	<input type="checkbox" name="hobby" id="music" value="music">
	<label for="music">听音乐</label>
</p>
<p>
	<input type="checkbox" name="hobby" id="others" value="其它">
	<label for="others">其它</label>
</p>
<p>
<input type="button" value="全选" onclick="changeBoxes(1);" />
<input type="button" value="全不选" onclick="changeBoxes(0);" />
<input type="button" value="反选" onclick="changeBoxes(-1);" />
</p>
</form>
</body>
</html>

⌨️ 快捷键说明

复制代码 Ctrl + C

搜索代码 Ctrl + F

全屏模式 F11

切换主题 Ctrl + Shift + D

显示快捷键 ?

增大字号 Ctrl + =

减小字号 Ctrl + -