javascript中的select、checkbox
遍历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的更多相关文章
- javascript中的内置对象
2015.12.1 javascript中的内置对象 复习: 1.js中的内置函数 alert prompt write parseInt parseFloat eval isNaN document ...
- JavaScript中的execCommand()命令详解及实例展示
execCommand方法是执行一个对当前文档,当前选择或者给出范围的命令.处理Html数据时常用如下格式:document.execCommand(sCommand[,交互方式, 动态参数]) ,其 ...
- JavaScript中的execCommand
execCommand方法是执行一个对当前文档,当前选择或者给出范围的命令.处理Html数据时常用 如下格式:document.execCommand(sCommand[,交互方式, 动态参数]) , ...
- Javascript中的Form表单知识点总结
Javascript中的Form表单知识点总结 在HTML中,表单是由form元素来表示的,但是在javascript中,表单则由HTMLFormElement类型,此元素继承了HTMLElement ...
- JavaScript中常用的事件
.onclick事件 点击事件(onclick并不是js中的方法,onclick只是浏览器提供js的一个dom接口,让js可以操作dom,所以onclick大小写都是没问题的,比如HTML代码就不用区 ...
- 【转载】javascript中的函数对象
原文地址:http://www.cnblogs.com/phpzxh/archive/2009/09/16/1568137.html[侵删] 在javascript中函数的申明方式有四种 下面代码中一 ...
- JavaScript中的表单编程
表单编程 1获取表单相关信息 1.什么是表单元素 1.什么是表单元素 在H TML中表单就是指form标签,它的作用是将用户输入或选择的数据提交给指定的服务器 2.如何获取表单元素 <form ...
- 根据JavaScript中原生的XMLHttpRequest实现jQuery的Ajax
基本介绍 XmlHttpRequest XmlHttpRequest是JavaScript中原生的,历史悠久的一种发送网络请求的方案. 基本上所有前端框架对于网络请求的部分都是基于它来完成的. 在本章 ...
- javascript中函数的3个高级技巧
× 目录 [1]作用域安全 [2]惰性载入 [3]函数绑定 前面的话 函数对任何一门语言来说都是一个核心的概念,在javascript中更是如此.前面曾以深入理解函数系列的形式介绍了函数的相关内容,本 ...
随机推荐
- string::size_type 页73 size_t 页90
异同点: size_t size_type sizeof(XXX)所得到的结果的类型就是 string类类型和vector类类型定义的类型,string的size操作返回来的是string::size ...
- js中如何避免动态引入重复资源
创建存储数据的数组或者对象: 每次调用方法的时候,往里面添加资源对象,包括路径: 每次调用的时候遍历此路劲是否存在,如存在,就调用此资源对象的promise进行操作. 可避免资源未加载完成就执行的情况 ...
- hdu 4300 拓展kmp
题目大意: 输入样例个数,每个样例有两行,第一行是26个字母,分别代表a~z加密后的密文:第二行代表一串密文+明文,密文一定是完整的,但明文可能不完整,让你输出最短的(密文+明文): 基本思路: 拓展 ...
- 关系型数据库---MYSQL---系统学习
1.概述 1.1 mysql数据库是一种 客户端/服务器体系 的 数据库系统: 服务器部分 在启动运行后没有人机界面,所以终端用户 无法直接使用MySQL: 对MySQL数据库进行访问.操作 ...
- (微服务架构)Security + Oauth2 + Jwt + Zuul解决微服务系统的安全问题
前言 之前零零散散的学习过一点鉴权这方面的玩意儿,但自我感觉净他妈整些没用的,看代码还是看不懂,这次我们再统一对其进行学习一下,希望自己掌握这个技能,也希望屏幕面前的你能有点收获 此次的学习周期可能有 ...
- 戏说 .NET GDI+系列学习教程(三、Graphics类的应用_自定义控件--主要用于画面拖拽效果)
如题,需求:在某个图片上用户可以手动指定位置. 如下: 中心思想:仿照Visual Studio工具中的控件的做法 如何仿照呢? 1.自定义的控件类继承System.Windows.Forms.Con ...
- jQuery实用美化input 上传组建
下载插件 (5) 简要教程 jquery-filestyle是一款可以简单实用的表单文件上传域美化jQuery插件.该插件可以将表单的文件上传域转换为类似Bootstrap按钮组的样式 ...
- js中常用的正则表达式
我一般对正则的使用方式如下,该方法会返回一个boolean值,然后对这个返回值来进行判断 // 判断是否是整数 function isInt(num) { var reg = new RegExp(& ...
- Ansible随笔8
自定义模块的开发模式 1.决定自定义模块的存放路径 编辑/etc/ansible/ansible.cfg文件,修改library = /usr/share/ansible/. 这样就告诉ansible ...
- 自动生成web api接口文档
然后打开web程序,访问ip:port/Help. 为什么可以直接输入Help就能访问呢,因为这个插件本身已经配置了路径,如下. public class HelpPageAreaRegistrati ...