位置:电子教程 > HTML入门到精通 (如果看不到内容请使用360浏览器) 推荐学习资源
第1章 HTML 入门
第2章 HTML 基础标签
第3章 HTML 高级标签
第4章 HTML 表单标签
第5章 HTML 媒体和视频(Videos)
当前阅读教程: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>

示例

小白教程网www.2d5.net

代码
:input标签type属性之checkbox复选框

下面我们来看下在网页中的效果,示例

小白教程网www.2d5.net

代码如下:

<!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

image.png

image.png

上一篇: 4.5 input标签type属性之button按钮 下一篇: 4.7 input标签type属性之color拾色器
毕业设计网             广告联系QQ:45157718(微信同号)