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 相关文章推荐
js中的preventDefault与stopPropagation详解
Jan 29 Javascript
JavaScript中的Object对象学习教程
May 20 Javascript
JS使用onerror捕获异常示例
Aug 03 Javascript
javascript动画之模拟拖拽效果篇
Sep 26 Javascript
jQuery根据ID、CLASS、等获取对象的实例
Dec 04 Javascript
利用D3.js实现最简单的柱状图示例代码
Dec 09 Javascript
canvas实现弧形可拖动进度条效果
May 11 Javascript
JS实现json的序列化和反序列化功能示例
Jun 13 Javascript
快速理解 JavaScript 中的 LHS 和 RHS 查询的用法
Aug 24 Javascript
vue中使用element-ui进行表单验证的实例代码
Jun 22 Javascript
Angular8路由守卫原理和使用方法
Aug 29 Javascript
如何在Express4.x中愉快地使用async的方法
Nov 18 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 iconv 解决utf-8和gb2312编码转换问题
2010/04/12 PHP
jQueryUI的Dialog的简单封装
2010/06/07 Javascript
解析jQuery与其它js(Prototype)库兼容共存
2013/07/04 Javascript
JavaScript中使用ActiveXObject操作本地文件夹的方法
2014/03/28 Javascript
javascript实现的淘宝旅行通用日历组件用法实例
2015/08/03 Javascript
jQuery实现图片渐入渐出切换展示效果
2015/08/15 Javascript
vue.js表格组件开发的实例详解
2016/10/12 Javascript
Bootstrap CDN和本地化环境搭建
2016/10/26 Javascript
浅析Jquery操作select
2016/12/13 Javascript
ES6解构赋值的功能与用途实例分析
2017/10/31 Javascript
解决Mac下安装nmp的淘宝镜像失败问题
2018/05/16 Javascript
QRCode.js二维码生成并能长按识别
2018/10/16 Javascript
js实现幻灯片轮播图
2020/08/14 Javascript
[01:42:49]DOTA2-DPC中国联赛 正赛 iG vs PSG.LGD BO3 第一场 2月26日
2021/03/11 DOTA
python字符串连接方式汇总
2014/08/21 Python
python函数的5种参数详解
2017/02/24 Python
python的exec、eval使用分析
2017/12/11 Python
PyQt4实现下拉菜单可供选择并打印出来
2018/04/20 Python
Python3中的json模块使用详解
2018/05/05 Python
PyQt5固定窗口大小的方法
2019/06/18 Python
python实现对图片进行旋转,放缩,裁剪的功能
2019/08/07 Python
python opencv图片编码为h264文件的实例
2019/12/12 Python
Pop In A Box英国:Funko POP搪胶公仔
2019/05/27 全球购物
Bravofly德国:预订廉价航班和酒店
2019/09/22 全球购物
德国帽子专家:Hutshopping
2019/11/03 全球购物
食品安全汇报材料
2014/08/18 职场文书
缅怀先烈演讲稿
2014/09/03 职场文书
2014年最新学校运动会广播稿
2014/09/17 职场文书
KTV门卫岗位职责
2014/10/09 职场文书
长城导游词
2015/01/30 职场文书
幼儿园小班教师个人工作总结
2015/02/06 职场文书
2015年财务部工作总结
2015/04/10 职场文书
幼儿园六一主持词
2015/06/30 职场文书
java Nio使用NioSocket客户端与服务端交互实现方式
2021/06/15 Java/Android
Python+OpenCV实现在图像上绘制矩形
2022/03/21 Python
Python实现灰色关联分析与结果可视化的详细代码
2022/03/25 Python