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 相关文章推荐
滚动经典最新话题[prototype框架]下编写
Oct 03 Javascript
Mootools 1.2教程 Fx.Morph、Fx选项和Fx事件
Sep 15 Javascript
3Z版基于jquery的图片复选框(asp.net+jquery)
Apr 12 Javascript
JS函数定义方式的区别介绍
Mar 22 Javascript
深入浅析Node.js单线程模型
Jul 10 Javascript
微信小程序picker组件下拉框选择input输入框的实例
Sep 20 Javascript
详解vue项目首页加载速度优化
Oct 18 Javascript
JavaScript前端页面搜索功能案例【基于jQuery】
Jul 10 jQuery
JavaScript实现随机五位数验证码
Sep 27 Javascript
vue axios封装httpjs,接口公用配置拦截操作
Aug 11 Javascript
vue项目多环境配置(.env)的实现
Jul 21 Vue.js
手写实现JS中的new
Nov 07 Javascript
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
linux下安装php的memcached客户端
2014/08/03 PHP
php封装的图片(缩略图)处理类完整实例
2016/10/19 PHP
PHP+mysql实现从数据库获取下拉树功能示例
2017/01/06 PHP
php查看一个变量的占用内存的实例代码
2020/03/29 PHP
PHP实现获取文件mime类型多种方法解析
2020/05/28 PHP
javascript获取当前日期时间及其它操作函数
2011/01/11 Javascript
jQuery中extend函数的实现原理详解
2015/02/03 Javascript
JS实现随机乱撞彩色圆球特效的方法
2015/05/05 Javascript
jquery获得当前html页面源码的方法
2015/07/14 Javascript
学习掌握JavaScript中this的使用技巧
2016/08/29 Javascript
使用nodejs爬取前程无忧前端技能排行
2017/05/06 NodeJs
浅谈Angular路由守卫
2017/08/26 Javascript
JS运动特效之同时运动实现方法分析
2018/01/24 Javascript
Node.js readline 逐行读取、写入文件内容的示例
2018/03/01 Javascript
Vue单页应用引用单独的样式文件的两种方式
2018/03/30 Javascript
angular使用md5,CryptoJS des加密的方法
2019/06/03 Javascript
微信小程序批量上传图片到七牛(推荐)
2019/12/19 Javascript
详解javascript中var与ES6规范中let、const区别与用法
2020/01/11 Javascript
jquery实现手风琴案例
2020/05/04 jQuery
用Python写一段用户登录的程序代码
2018/04/22 Python
python3.5绘制随机漫步图
2018/08/27 Python
Python读取系统文件夹内所有文件并统计数量的方法
2018/10/23 Python
python pickle存储、读取大数据量列表、字典数据的方法
2019/07/07 Python
python pygame实现挡板弹球游戏
2019/11/25 Python
linux 下python多线程递归复制文件夹及文件夹中的文件
2020/01/02 Python
解决 jupyter notebook 回车换两行问题
2020/04/15 Python
Numpy中np.random.rand()和np.random.randn() 用法和区别详解
2020/10/23 Python
天猫国际进口超市直营:官方直采,一站购齐
2017/12/11 全球购物
意大利高端时尚买手店:Stefania Mode
2018/03/01 全球购物
中国茶叶、茶具一站式网上购物商城:醉品茶城
2018/07/03 全球购物
教师自我鉴定
2013/12/13 职场文书
烹调加工管理制度
2014/02/04 职场文书
热爱祖国演讲稿
2014/05/04 职场文书
行政诉讼答辩状
2015/05/21 职场文书
运动会加油稿30字
2015/07/21 职场文书
TV动画《神废柴☆偶像》公布先导PV
2022/03/20 日漫