 |
位置：电子教程 > HTML入门到精通 (如果看不到内容请使用360浏览器) | 推荐学习资源 |
|
位置：电子教程 > HTML入门到精通 (如果看不到内容请使用360浏览器) | 推荐学习资源 |
| 当前阅读教程：HTML入门到精通 > 4.6 input标签type属性之checkbox复选框 | |
| 阅读(22555525) 收藏 赞(5685) 分享 | |
| 上一篇： 4.5 input标签type属性之button按钮 | 下一篇： 4.7 input标签type属性之color拾色器 |
基础语法输入类型：checkbox <input type="checkbox"> 复选框（Checkboxes），定义了复选框. 用户需要从若干给定的选择中选取一个或若干选项。 <form action=""> <input type="checkbox" name="vehicle[]" value="Bike"> 我有一辆自行车<br> <input type="checkbox" name="vehicle[]" value="Car"> 我有一辆小轿车<br> <input type="checkbox" name="vehicle[]" value="Boat"> 我有一艘船<br> <input type="submit" value="提交"> </form> 示例代码：input标签type属性之checkbox复选框下面我们来看下在网页中的效果，示例代码如下： <!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>input标签type属性之checkbox复选框</title>
</head>
<body>
<form>
<input type="checkbox" name="test" value="1">001
<input type="checkbox" name="test" value="2">002
<input type="checkbox" name="test" value="3">003
<input type="button" value="提交" onClick="fun()" >
<script>
function fun(){
obc = document.getElementsByName("test");
check_val=[];
for(k in obc){
if(obc[k].checked)
check_val.push(obc[k].value);
}
alert("当前选中的内容："+check_val);
}
</script>
</form>
</body>
</html>效果如图4-4和图4-5和图4-6。
|
|
| 上一篇： 4.5 input标签type属性之button按钮 | 下一篇： 4.7 input标签type属性之color拾色器 |
