遍历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. KindEditor在eclipse里的配置方法

    KindEditor介绍: kindEditor是一款国产富文本编辑器,类似fckeditor和目前比较流行的百度Ueditor.其产品官方网站为http://kindeditor.net/ Kind ...

  2. redis相关笔记(一.安装及单机及哨兵使用)

    redis笔记一 redis笔记二 redis笔记三 1.安装 cd /usr/src #进入下载目录(这个目录自己定) yum install -y wget gcc make tcl #安装依赖 ...

  3. leetcode-13双周赛-1257-最小公共区域

    题目描述: 方法: class Solution(object): def findSmallestRegion(self, regions, region1, region2): parent = ...

  4. jq随机生成数字加字母的字符串

    html代码: <dl class="row"> <dt class="tit"> <label for="title& ...

  5. PHP FILTER_UNSAFE_RAW 过滤器

    定义和用法 FILTER_UNSAFE_RAW 过滤器不进行任何过滤,去除或编码特殊字符. 该过滤器删除那些对应用程序有潜在危害的数据.它用于去除标签以及删除或编码不需要的字符. 如果不规定标志,则该 ...

  6. js中浏览器对象BOM

    参考  :  https://www.cnblogs.com/Peng2014/p/4725524.html 1. window对象   https://www.runoob.com/jsref/ob ...

  7. 解决spring boot中普通类中使用service为null 的方法

    我使用的是springboot+mybatisplus +mysql1.创建一个SpringUtil工具类 import org.springframework.beans.BeansExceptio ...

  8. 拾遗：Vim 批量删除匹配到的行

    删除包含特定字符的行 g/pattern/d (全局删除匹配行) ,5g/pattern/d (删除第1-5行里的匹配行) 删除不包含指定字符的行 v/pattern/d g!/pattern/d ( ...

  9. Linux中的网络管理——网络配置及命令

    Linux网络配置 在Linux中配置IP地址的方法有以下这么几种: 图形界面配置IP地址(操作方式如Windows系统配置IP,但在实际生产中,我们并不建议在我们的服务器上安装Linux的图形界面, ...

  10. Java性能调优攻略全分享，5步搞定！（附超全技能图谱）

    对于很多研发人员来说,Java 性能调优都是很头疼的问题,为什么这么说?如今,一个简单的系统就囊括了应用程序.数据库.容器.操作系统.网络等技术,线上一旦出现性能问题,就可能要你协调多方面组件去进行优 ...