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 相关文章推荐
javascript instanceof 内部机制探析
Oct 15 Javascript
jQuery队列控制方法详解queue()/dequeue()/clearQueue()
Dec 02 Javascript
ExtJS下 Ext.Direct加载和提交过程排错小结
Apr 02 Javascript
javascript学习笔记(四)function函数部分
Sep 30 Javascript
jQuery中append()方法用法实例
Dec 25 Javascript
jQuery标签编辑插件Tagit使用指南
Apr 21 Javascript
js实现n秒倒计时后才可以点击的效果
Dec 20 Javascript
BootStrap框架个人总结(bootstrap框架、导航条、下拉菜单、轮播广告carousel、栅格系统布局、标签页tabs、模态框、菜单定位)
Dec 01 Javascript
JavaScript设计模式之单例模式详解
Jun 09 Javascript
Vue项目History模式404问题解决方法
Oct 31 Javascript
jquery操作checkbox的常用方法总结【附测试源码下载】
Jun 10 jQuery
非常漂亮的js烟花效果
Mar 10 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
php面向对象全攻略 (一) 面向对象基础知识
2009/09/30 PHP
解析php函数method_exists()与is_callable()的区别
2013/06/21 PHP
如何使用PHP获取指定日期所在月的开始日期与结束日期
2013/08/01 PHP
mac下安装nginx和php
2013/11/04 PHP
php smarty模板引擎的6个小技巧
2014/04/24 PHP
PHP连接SQL Server的方法分析【基于thinkPHP5.1框架】
2019/05/06 PHP
javascript 写类方式之九
2009/07/05 Javascript
JavaScript 判断日期格式是否正确的实现代码
2011/07/04 Javascript
JS无法捕获滚动条上的mouse up事件的原因猜想
2012/03/21 Javascript
javascript jscroll模拟html元素滚动条
2012/12/18 Javascript
javascript 数字格式化输出的实现代码
2013/12/10 Javascript
Javascript字符串浏览器兼容问题分析
2014/12/01 Javascript
node.js中的events.emitter.once方法使用说明
2014/12/10 Javascript
kindeditor编辑器点中图片滚动条往上顶的bug
2015/07/05 Javascript
基于jquery实现复选框全选,反选,全不选等功能
2015/10/16 Javascript
JS表单验证的代码(常用)
2016/04/08 Javascript
EasyUI折叠表格层次显示detailview详解及实例
2016/12/28 Javascript
JavaScript运动框架 多值运动(四)
2017/05/18 Javascript
vue mintui-Loadmore结合实现下拉刷新和上拉加载示例
2017/10/12 Javascript
JS运动特效之完美运动框架实例分析
2018/01/24 Javascript
react中fetch之cors跨域请求的实现方法
2018/03/14 Javascript
JavaScript创建对象方法实例小结
2018/09/03 Javascript
js jquery 获取某一元素到浏览器顶端的距离实现方法
2018/09/05 jQuery
微信小程序websocket实现即时聊天功能
2019/05/21 Javascript
[00:18]天涯墨客三技能展示
2018/08/25 DOTA
简单介绍Python中的JSON使用
2015/04/28 Python
Numpy之将矩阵拉成向量的实例
2019/11/30 Python
Sentry错误日志监控使用方法解析
2020/11/12 Python
Python基础进阶之海量表情包多线程爬虫功能的实现
2020/12/17 Python
CSS3为背景图设置遮罩并解决遮罩样式继承问题
2020/06/22 HTML / CSS
教你使用Canvas处理图片的方法
2017/11/28 HTML / CSS
美国生鲜及杂货电商:FreshDirect
2018/01/29 全球购物
文件中有一组整数,要求排序后输出到另一个文件中
2012/01/04 面试题
工作证明格式及范本
2014/09/12 职场文书
2015年考研复习计划
2015/01/19 职场文书
2015年幼儿园中班工作总结
2015/04/25 职场文书