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 相关文章推荐
FusionCharts图表显示双Y轴双(多)曲线
Nov 22 Javascript
利用jQuery的deferred对象实现异步按顺序加载JS文件
Mar 17 Javascript
Jquery实现视频播放页面的关灯开灯效果
May 27 Javascript
jQuery基于ID调用指定iframe页面内的方法
Jul 06 Javascript
JS解决iframe之间通信和自适应高度的问题
Aug 24 Javascript
AngularJS中watch监听用法分析
Nov 04 Javascript
node.js连接mysql与基本用法示例
Jan 05 Javascript
Node.js EventEmmitter事件监听器用法实例分析
Jan 07 Javascript
微信小程序实现单选选项卡切换效果
Jun 19 Javascript
js的Object.assign用法示例分析
Mar 05 Javascript
AngularJs的$http发送POST请求,php无法接收Post的数据问题及解决方案
Aug 13 Javascript
jQuery ajax - getScript() 方法和getJSON方法
May 14 jQuery
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
BBS(php &amp; mysql)完整版(六)
2006/10/09 PHP
解析PayPal支付接口的PHP开发方式
2010/11/28 PHP
php preg_filter执行一个正则表达式搜索和替换
2012/02/27 PHP
Laravel框架表单验证详解
2014/09/04 PHP
PHP标准库(PHP SPL)详解
2019/03/16 PHP
php的优点总结 php有哪些优点
2019/07/19 PHP
jquery load()在firefox(火狐)下显示不正常的解决方法
2011/04/05 Javascript
用按钮控制iframe显示的网页实现方法
2013/02/04 Javascript
jquery查找父元素、子元素(个人经验总结)
2014/04/09 Javascript
javascript实现淡蓝色的鼠标拖动选择框实例
2015/05/09 Javascript
JavaScript中setUTCFullYear()方法的使用简介
2015/06/12 Javascript
JS实现仿新浪黄色经典滑动门效果代码
2015/09/27 Javascript
js判断一个字符串是以某个字符串开头的简单实例
2016/12/27 Javascript
JS中from 表单序列化提交的代码
2017/01/20 Javascript
jQuery EasyUI 组件加上“清除”功能实例详解
2017/04/11 jQuery
使用vue的transition完成滑动过渡的示例代码
2018/06/25 Javascript
angular2组件中定时刷新并清除定时器的实例讲解
2018/08/31 Javascript
微信小程序显示倒计时功能示例【测试可用】
2018/12/03 Javascript
nodejs log4js 使用详解
2019/05/31 NodeJs
JS防抖和节流实例解析
2019/09/24 Javascript
[03:46]DOTA2英雄基础教程 维萨吉
2013/12/11 DOTA
[01:30:55]VG vs Mineski Supermajor 败者组 BO3 第三场 6.6
2018/06/07 DOTA
[05:15]2018年度CS GO社区贡献奖-完美盛典
2018/12/16 DOTA
python实现ftp客户端示例分享
2014/02/17 Python
python简单实现刷新智联简历
2016/03/30 Python
Python+PyQt5实现美剧爬虫可视工具的方法
2019/04/25 Python
用Q-learning算法实现自动走迷宫机器人的方法示例
2019/06/03 Python
大学四年的个人自我评价
2014/01/14 职场文书
2014年大学生自我评价
2014/01/19 职场文书
微观物理专业自荐信
2014/01/26 职场文书
小学教师师德感言
2014/02/10 职场文书
开幕式邀请函
2015/01/31 职场文书
单位计划生育责任书
2015/05/09 职场文书
掌握这项技巧,一年阅读300本书不是梦
2019/09/12 职场文书
Ubuntu Server 安装Tomcat并配置systemctl
2022/04/28 Servers
纯CSS打字动画的实现示例
2022/08/05 HTML / CSS