遍历checkbox

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />

<title>Insert title here</title>

</head>

<body>

<input type="checkbox" name="sex[]" value='男'/>男

<input type="checkbox" name="sex[]" value='女'/>女

<input type="checkbox" name="sex[]" value='保密'/>保密

<input id="bu1" type="button" value="遍历checkbox"/>

</body>

</html>

<script type="text/javascript">

document.getElementById('bu1').onclick=function(){

    var bL=document.getElementsByName('sex[]');

    for(var i=0;i<bL.length;i++){

        alert(bL[i].value);

        alert(bL[i].checked);

    }

}

</script>

遍历select

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />

<title>Insert title here</title>

<script type="text/javascript">

function fun1(){

    var ob=document.getElementsByName('province')[0];

    var oC=ob.options;

    for(var i=0;i<oC.length;i++){

        alert(oC[i].value);

        alert(oC[i].text);

        alert(oC[i].selected);

    }

}

function addCity(){

    //根据province选中的值，来给city追加option

    var ob=document.getElementsByName('province')[0];

    var v=ob.value;//获取被选中的option的value属性值

    var cityOb=document.getElementsByName('city')[0];

    switch(v){

    case '0':

        cityOb.options.length=1;

        cityOb.options[0].value='0';

        cityOb.options[0].text='请选择';

        break;

    case '1':

        cityOb.options.length=3;

        cityOb.options[0].value='0';

        cityOb.options[0].text='请选择';

        cityOb.options[1].value='1';

        cityOb.options[1].text='海淀区';

        cityOb.options[2].value='2';

        cityOb.options[2].text='丰台区';

        break;

    case '2':

        cityOb.options.length=4;

        cityOb.options[0].value='0';

        cityOb.options[0].text='请选择';

        cityOb.options[1].value='1';

        cityOb.options[1].text='石家庄';

        cityOb.options[2].value='2';

        cityOb.options[2].text='承德';

        cityOb.options[3].value='3';

        cityOb.options[3].text='唐山';

        break;

    case '3':

        cityOb.options.length=2;

        cityOb.options[0].value='0';

        cityOb.options[0].text='请选择';

        cityOb.options[1].value='1';

        cityOb.options[1].text='济南';

        break;

    }

}

</script>

</head>

<body>

<select onchange="addCity();" name="province">

    <option value="0">请选择</option>

    <option value='1'>北京</option>

    <option value='2'>河北</option>

    <option value='3'>山东</option>

</select>

<select name="city">

    <option value="0">请选择</option>

</select>

<input onclick="fun1();" type="button" value="遍历option"/>

</body>

</html>

javascript中的select、checkbox的更多相关文章

  1. javascript中的内置对象

    2015.12.1 javascript中的内置对象 复习: 1.js中的内置函数 alert prompt write parseInt parseFloat eval isNaN document ...

  2. JavaScript中的execCommand()命令详解及实例展示

    execCommand方法是执行一个对当前文档,当前选择或者给出范围的命令.处理Html数据时常用如下格式:document.execCommand(sCommand[,交互方式, 动态参数]) ,其 ...

  3. JavaScript中的execCommand

    execCommand方法是执行一个对当前文档,当前选择或者给出范围的命令.处理Html数据时常用 如下格式:document.execCommand(sCommand[,交互方式, 动态参数]) , ...

  4. Javascript中的Form表单知识点总结

    Javascript中的Form表单知识点总结 在HTML中,表单是由form元素来表示的,但是在javascript中,表单则由HTMLFormElement类型,此元素继承了HTMLElement ...

  5. JavaScript中常用的事件

    .onclick事件 点击事件(onclick并不是js中的方法,onclick只是浏览器提供js的一个dom接口,让js可以操作dom,所以onclick大小写都是没问题的,比如HTML代码就不用区 ...

  6. 【转载】javascript中的函数对象

    原文地址:http://www.cnblogs.com/phpzxh/archive/2009/09/16/1568137.html[侵删] 在javascript中函数的申明方式有四种 下面代码中一 ...

  7. JavaScript中的表单编程

    表单编程 1获取表单相关信息 1.什么是表单元素 1.什么是表单元素 在H TML中表单就是指form标签,它的作用是将用户输入或选择的数据提交给指定的服务器 2.如何获取表单元素 <form ...

  8. 根据JavaScript中原生的XMLHttpRequest实现jQuery的Ajax

    基本介绍 XmlHttpRequest XmlHttpRequest是JavaScript中原生的,历史悠久的一种发送网络请求的方案. 基本上所有前端框架对于网络请求的部分都是基于它来完成的. 在本章 ...

  9. javascript中函数的3个高级技巧

    × 目录 [1]作用域安全 [2]惰性载入 [3]函数绑定 前面的话 函数对任何一门语言来说都是一个核心的概念,在javascript中更是如此.前面曾以深入理解函数系列的形式介绍了函数的相关内容,本 ...

随机推荐

  1. Nodejs去掉/favicon.ico的请求

    const http=require("http"); const server=http.createServer(); server.on("request" ...

  2. Schema约束与DTD约束

    现将Schema约束与DTD约束实现的一个实例截图出来: 1.DTD 1.1 DTD文件 1.2 DTD实现 2.Schema 2.1 Schema约束 2.2 Schema实现

  3. Android VideoView无法播放网络视频

    今天学习Android播放视频和音频,其中在练习播放视频的时候无法播放网络视频,网络视频是别人发布在网上的,但是把视频放在本地是可以的,最后推测是没有开放网络的访问权限的问题,果然开放了之后就能正常访 ...

  4. Java异常架构与异常关键字

    Java异常简介 Java异常是Java提供的一种识别及响应错误的一致性机制. Java异常机制可以使程序中异常处理代码和正常业务代码分离,保证程序代码更加优雅,并提高程序健壮性.在有效使用异常的情况 ...

  5. vue组件实例的生命周期

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  6. vue中js获取组件实例

    获取到的VM实例,外部js仍然能自由调用VM的一切属性和方法. <template> </template> <script> // 声明变量currVM let ...

  7. 基于VMWare配置VxWorks开发环境

    常规VxWorks的开发环境都是基于目标开发板或目标机来构建的,但并非所有人都具备这样的条件,所以本文主要介绍如何基于vmware来构建VxWorks开发环境.   Step 1. 安装vmware ...

  8. python实现线程池(2.4)

    线程池 什么是线程池? 诸如web服务器.数据库服务器.文件服务器和邮件服务器等许多服务器应用都面向处理来自某些远程来源的大量短小的任务. 构建服务器应用程序的一个过于简单的模型是:每当一个请求到达就 ...

  9. RF中滚动条的操作方法小结

    滚动条分为俩种,一:主页面中的滚动条.二:页面中的子页面的滚动条. 每种滚动条有都分为上下滑动与左右滑动. 下面分别介绍: 一:主页面的滚动条上下滑动: execute javascript      ...

  10. 2.4 webpack + gulp 构建完整前端工作流

    在前面的两个小节中已经完整的讲了 webpack 和 gulp 相关的内容,本小节中将会结合二者构建一个完整的前端工作流,内容目录为: 前端工程结构和目标 前端工程目录结构 gulp clean gu ...