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 相关文章推荐
jQuery插件-jRating评分插件源码分析及使用方法
Dec 28 Javascript
JS操作select下拉框动态变动(创建/删除/获取)
Jun 02 Javascript
浅谈JavaScript对象的创建方式
Jun 13 Javascript
JavaScript计时器用法分析【setTimeout和clearTimeout】
Jan 18 Javascript
通过npm引用的vue组件使用详解
Mar 02 Javascript
Bootstrap 表单验证formValidation 实现远程验证功能
May 17 Javascript
解决ionic和angular上拉加载的问题
Aug 03 Javascript
node中koa中间件机制详解
Aug 22 Javascript
vue使用中的内存泄漏【推荐】
Jul 10 Javascript
JS实现二维数组元素的排列组合运算简单示例
Jan 28 Javascript
修改layui的后台模板的左侧导航栏可以伸缩的方法
Sep 10 Javascript
ES6字符串的扩展实例
Dec 21 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程序61条面向对象分析设计的经验小结
2008/11/12 PHP
Yii2.0预定义的别名功能小结
2016/07/04 PHP
php array_values 返回数组的所有值详解及实例
2016/11/12 PHP
PHP实现创建一个RPC服务操作示例
2020/02/23 PHP
PHP tp5中使用原生sql查询代码实例
2020/10/28 PHP
js window.event对象详尽解析
2009/02/17 Javascript
table对象中的insertRow与deleteRow使用示例
2014/01/26 Javascript
Node.js中的缓冲与流模块详细介绍
2015/02/11 Javascript
JavaScript仿静态分页实现方法
2015/08/04 Javascript
JS实现的自定义水平滚动字体插件完整实例
2016/06/17 Javascript
AngularJS使用带属性值的ng-app指令实现自定义模块自动加载的方法
2017/01/04 Javascript
详解Vue2.X的路由管理记录之 钩子函数(切割流水线)
2017/05/02 Javascript
JS验证输入的是否是数字及保留几位小数问题
2018/05/09 Javascript
vue mounted 调用两次的完美解决办法
2018/10/29 Javascript
微信小程序使用二次贝塞尔曲线画波浪
2018/12/25 Javascript
Javascript操作select控件代码实例
2020/02/14 Javascript
python中的字典详细介绍
2014/09/18 Python
Python中列表、字典、元组数据结构的简单学习笔记
2016/03/20 Python
Python实现打印螺旋矩阵功能的方法
2017/11/21 Python
Python编程求解二叉树中和为某一值的路径代码示例
2018/01/04 Python
对sklearn的使用之数据集的拆分与训练详解(python3.6)
2018/12/14 Python
python的re模块使用方法详解
2019/07/26 Python
Cython编译python为so 代码加密示例
2019/12/23 Python
Python求平面内点到直线距离的实现
2020/01/19 Python
css3 实现圆形旋转倒计时
2018/02/24 HTML / CSS
英国婴儿和儿童服装网站:Vertbaudet
2018/04/02 全球购物
澳大利亚领先的女帽及配饰公司:Morgan&Taylor
2019/12/01 全球购物
施工人员岗位职责
2013/12/12 职场文书
售后服务承诺书
2014/03/26 职场文书
道路交通事故人身损害赔偿协议书
2014/11/19 职场文书
幼师小班个人总结
2015/02/12 职场文书
汽车修理厂管理制度
2015/08/05 职场文书
2016年端午节红领巾广播稿
2015/12/18 职场文书
让人瞬间清醒的句子,句句经典,字字如金
2019/07/08 职场文书
详解Vue的options
2021/05/15 Vue.js
不负正版帝国之名 《重返帝国》引领SLG手游制作新的标杆
2022/04/07 其他游戏