jquery中对表单的基本操作代码

 更新时间:2010年07月29日 12:49:07   作者:  
jquery对表单的基本操作,里面对于checkbox等表单的获取,都有很详细的说明。
复制代码 代码如下:

<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>

相关文章

  • Jquery实现鼠标移动放大图片功能实例

    Jquery实现鼠标移动放大图片功能实例

    这篇文章主要介绍了Jquery实现鼠标移动放大图片功能,实例分析了jQuery操作鼠标与图片的技巧,非常具有实用价值,需要的朋友可以参考下
    2015-03-03
  • 浅析LigerUi开发中谨慎载入common.css文件

    浅析LigerUi开发中谨慎载入common.css文件

    这一句是载页面载入时,显示正在载入动画效果,但是极大影响了程序开发里的调试。给新手的建议,希望可以参考下
    2013-07-07
  • jQuery 入门讲解1

    jQuery 入门讲解1

    jquery的优点比较多,大家可以学习下,网上好多效果都是用jquery实现的。
    2009-04-04
  • jquery实现表格行的上下移动和置顶

    jquery实现表格行的上下移动和置顶

    这篇文章主要为大家详细介绍了jquery实现表格行的上下移动和置顶,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2022-02-02
  • jQuery使用hide方法隐藏页面上指定元素的方法

    jQuery使用hide方法隐藏页面上指定元素的方法

    这篇文章主要介绍了jQuery使用hide方法隐藏页面上指定元素的方法,涉及jQuery使用hide隐藏元素的技巧,具有一定参考借鉴价值,需要的朋友可以参考下
    2015-03-03
  • Jquery之Bind方法参数传递与接收的三种方法

    Jquery之Bind方法参数传递与接收的三种方法

    这篇文章主要介绍了Jquery的Bind方法参数传递与接收的三种方法,需要的朋友可以参考下
    2014-06-06
  • jQuery之end()和pushStack()使用介绍

    jQuery之end()和pushStack()使用介绍

    pushStack()方法在jQuery的DOM操作中被频繁的使用, 如在parent(), find(), filter()中, 当然还有其他许多类似的方法, 它们往往需要返回一个jQuery封装过的DOM结果集
    2012-02-02
  • jQuery动态生成Bootstrap表格

    jQuery动态生成Bootstrap表格

    这篇文章主要介绍了jQuery动态生成bootstrap表格的相关资料,非常不错具有一定的参考借鉴价值,需要的朋友可以参考下
    2016-11-11
  • jquery图片放大镜效果

    jquery图片放大镜效果

    这篇文章主要为大家详细介绍了jquery图片放大镜效果,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2017-06-06
  • jQuery处理图片加载失败的常用方法

    jQuery处理图片加载失败的常用方法

    这篇文章主要介绍了jQuery处理图片加载失败的常用方法,实例演示了jQuery处理图片加载失败时提示加载失败及隐藏加载失败信息的方法,需要的朋友可以参考下
    2015-06-06

最新评论