jquery中对表单的基本操作代码


Posted in Javascript onJuly 29, 2010
<html xmlns="http://www.w3.org/1999/xhtml"> 
<head runat="server"> 
<title></title> 
<script src="../conn/jsfile/jquery.js" type="text/javascript"></script> 
</head> 
<body> 
<form id="form1" runat="server"> 
文本框 :<input type="text" id="txt" value="txt" /><br /> 
单选按钮:<input type="radio" value="男" checked="checked" name="sex" />男 <input type="radio" value="女" name="sex" checked="checked"/>女<br /> 
复选框:<input type="checkbox" value="1" name="cc"/>1<input type="checkbox" value="2" checked="checked" name="cc" />2<input type="checkbox" value="3" checked="checked" name="cc" />3<br /> 
下拉框: 
<select id="sel" style="width: 100px"> 
<option value="yi">1</option> 
<option value="er" selected="selected">2</option> 
<option value="san">3</option> 
</select> 
<script language="javascript" type="text/javascript"> 
/*------------------------------------------------javascript-------------------------------------------*/ 
/* 获取文本框的值 
alert(document.getElementById("txt").value); 
*/ 
/*获取单选按钮的值 
var radios = document.getElementsByName("sex"); 
var n = radios.length; 
for (var i = 0; i < n; i++) { 
if (radios[i].checked) { 
alert(radios[i].value); 
} 
} 
*/ 
/*获取复选框中选中的值的组合 1,2,3,4 
var checkboxs = document.getElementsByName("cc"); 
var n = checkboxs.length; 
for (var i = 0; i < n; i++) { 
if (checkboxs[i].checked) { 
alert(checkboxs[i].value); 
} 
} 
*/ 
/*获取下拉列表的选中项的值 
方法一: 
alert(document.getElementById("sel").value); 
方法二: 
var sel = document.getElementById("sel"); 
alert(sel.options[sel.selectedIndex].value); 
*/ 
/*------------------------------------------------jquery-------------------------------------------*/ 
/*获取文本框的值 
alert($("#txt").val()); 
*/ 
/*获取单选框选中项的值 
alert($(":radio[name='sex']:checked").val()); 
单选框赋值 设置选中项 
$(":radio[name='sex']").val(["男"]); 
*/ 
/*获取复选框的值 
$(":checkbox[name='cc']:checked").each(function(i) { 
alert(this.value); 
}); 
复选框赋值 选中这几项 
$(":checkbox[name='cc']").val(["1", "2", "3"]); 
*/ 
/*获取下拉列表的值 
alert($("#sel").val()); 
获取下拉列表的文本 
alert($("#sel option:selected").text()); 
*/ 
</script> 
</form> 
</body> 
</html>
Javascript 相关文章推荐
学习ExtJS Panel常用方法
Oct 07 Javascript
自己整理的一个javascript日期处理函数
Oct 16 Javascript
jQuery boxy弹出层插件中文演示及使用讲解
Feb 24 Javascript
javascript:void(0)的作用示例介绍
Oct 28 Javascript
轻松掌握JavaScript单例模式
Aug 25 Javascript
原生js封装的一些jquery方法(详解)
Sep 20 Javascript
vue开发心得和技巧分享
Oct 27 Javascript
一个例子轻松学会Vue.js
Jan 02 Javascript
jQuery解析返回的xml和json方法详解
Jan 05 Javascript
node+vue实现用户注册和头像上传的实例代码
Jul 20 Javascript
vue二级路由设置方法
Feb 09 Javascript
vue实现同时设置多个倒计时
May 20 Vue.js
jquery下利用jsonp跨域访问实现方法
Jul 29 #Javascript
jquery-easyui关闭tab自动切换到前一个tab
Jul 29 #Javascript
jquery 图片轮换效果
Jul 29 #Javascript
jQuery的写法不同导致的兼容性问题的解决方法
Jul 29 #Javascript
基于jQuery制作迷你背词汇工具
Jul 27 #Javascript
IE之动态添加DOM节点触发window.resize事件
Jul 27 #Javascript
js操作二级联动实现代码
Jul 27 #Javascript
You might like
php中随机函数mt_rand()与rand()性能对比分析
2014/12/01 PHP
PHP mysqli事务操作常用方法分析
2017/07/22 PHP
PHP面向对象程序设计之多态性的应用示例
2018/12/19 PHP
javascript中interval与setTimeOut的区别示例介绍
2014/03/14 Javascript
js自定义鼠标右键的实现原理及源码
2014/06/23 Javascript
一款基jquery超炫的动画导航菜单可响应单击事件
2014/11/02 Javascript
jQuery AjaxUpload 上传图片代码
2016/02/02 Javascript
ui组件之input多选下拉实现方法(带有搜索功能)
2016/07/14 Javascript
js友好的时间返回函数
2016/08/24 Javascript
jQuery实现导航滚动到指定内容效果完整实例【附demo源码下载】
2016/09/20 Javascript
jQuery实现文章图片弹出放大效果
2017/04/06 jQuery
Windows安装Node.js报错:2503、2502的解决方法
2017/10/25 Javascript
js使用文档就绪函数动态改变页面内容示例【innerHTML、innerText】
2019/11/07 Javascript
[01:30:55]VG vs Mineski Supermajor 败者组 BO3 第三场 6.6
2018/06/07 DOTA
简单介绍Python中的JSON模块
2015/04/08 Python
Python实现递归遍历文件夹并删除文件
2016/04/18 Python
Python 经典面试题 21 道【不可错过】
2018/09/21 Python
python实现简单图片物体标注工具
2019/03/18 Python
Python迭代器Iterable判断方法解析
2020/03/16 Python
一款基于css3麻将筛子3D翻转特效的实例教程
2014/12/31 HTML / CSS
澳大利亚香水在线商店:City Perfume
2020/09/02 全球购物
军校本科大学生自我评价
2014/01/14 职场文书
保护环境倡议书
2014/04/14 职场文书
社区清明节活动总结
2014/07/04 职场文书
幼儿园六一活动总结
2014/08/27 职场文书
关于十八大的演讲稿
2014/09/15 职场文书
公安四风对照检查材料思想汇报
2014/10/11 职场文书
外科护士长工作总结
2015/08/12 职场文书
初中英语教学随笔
2015/08/15 职场文书
学生检讨书范文
2019/06/24 职场文书
想要创业,那么你做好准备了吗?
2019/07/01 职场文书
MySQL中连接查询和子查询的问题
2021/09/04 MySQL
mysql事务隔离级别详情
2021/10/24 MySQL
零基础学java之循环语句的使用
2022/04/10 Java/Android
Spring Boot实现文件上传下载
2022/08/14 Java/Android
前端框架ECharts dataset对数据可视化的高级管理
2022/12/24 Javascript