`
天然呆的爱死你了呢
  • 浏览: 12249 次
社区版块
存档分类
最新评论

jQuery的form表单取值 object对象的取值

阅读更多
开发过程中经常要处理页面表单元素,如:在下拉框select中获取selected的value值,在复选框checkBox中获取checked的value值等,来触发和调用其它页面表单元素,制作出交互性强,页面友好的表单。jQuery通过元素$(#id)产生一个Object对象,通过对获取的对象深入了解,完全可以获取任何页面元素中的任何信息,为了工作方便,我总结了相关jQuery操作object对象的方法,获取下拉框selected,复选框和单选框checked,文本框value值,供参考。



表单实例:

一,html部分

<form>
<!– 获取select的selected值 biuuu.com–>
<select id=”selectId“>
<option value=”biuuu_s1″>s1</option>
<option value=”biuuu_s2″>s2</option>
<option value=”biuuu_s3″>s3</option>
<option value=”biuuu_s4″>s4</option>
</select>
<input type=”button” id=”sButtonId” value=”获取selected值” />
<span id=”sResult“></span><br />

<!– 获取checkbox的checked值 biuuu.com–>
<input type=”checkbox” name=”checkboxId” value=”biuuu_c1″ />c1
<input type=”checkbox” name=”checkboxId” value=”biuuu_c2″ />c2
<input type=”checkbox” name=”checkboxId” value=”biuuu_c3″ />c3
<input type=”checkbox” name=”checkboxId” value=”biuuu_c4″ />c4
<input type=”button” id=”cButtonId” value=”获取checkbox值” />
<span id=”cResult“></span><br />

<!– 获取radio的checked值 biuuu.com–>
<input type=”radio” name=”radioId” value=”biuuu_r1″ />r1
<input type=”radio” name=”radioId” value=”biuuu_r2″ />r2
<input type=”radio” name=”radioId” value=”biuuu_r3″ />r3
<input type=”button” id=”rButtonId” value=”获取radio值” />
<span id=”rResult“></span><br />

<!– 获取text的value值 biuuu.com–>
<input type=”text” id=”textId” value=”" />
<input type=”button” id=”tButtonId” value=”获取text值” />
<span id=”tResult“></span>
</form>
二,JS部分

$(document).ready(function(){

$(”#sButtonId“).click(function(){
//获取select对象
var selectedObj = $(”#selectId option:selected”);
//获取当前selected的值
var selected = selectedObj.get(0).value;
$(”#sResult”).html(”结果:”+selected);
});

$(”#cButtonId“).click(function(){
//获取checkBox对象
var Check = ”;
var checkedObj = $(”[name='checkboxId'][@checked]“);
//获取当前checked的value值 如果选中多个则循环
checkedObj.each(function(){
var isCheck = this.value;
Check += isCheck;
});
$(”#cResult”).html(”结果:”+Check);
});

$(”#rButtonId“).click(function(){
//获取radio对象
var radioObj = $(”[name='radioId'][@checked]“);
//获取当前checked的value值
var radio = radioObj.get(0).value;
$(”#rResult”).html(”结果:”+radio);
});

$(”#tButtonId“).click(function(){
//获取text对象
var textObj = $(”#textId”);
//获取当前text的value值
var text = textObj.get(0).value;
$(”#tResult”).html(”结果:”+text);
});
});
实例效果如下:



其操作过程如下:
1,jQuery获取object对象,如下拉框select对象,单选框radio对象,复选框checkbox对象,文本框text对象;
2,获取对象值,对于值唯一的元素,如select,radio,text通过get()方法获取value值,对于数据元素,如checkbox通过each循环获取value值

为什么是get(0)?
get(0)如同数组下标,默认值是从0开始的

实例表明,掌握jQuery的object对象调用对于获取表单元素非常有用,可以获取下拉框selected值,复/单选框checked值,文本text的value值,增强我们制作表单元素的交互性与灵活性,上面实例中主要考虑到jQuery对象的调用原理,代码相对比较多,实际使用中完全可以精简代码行如下:
1,获取selected值:$(”#selectId option:selected”).get(0).value
2,获取radio checked值:$(”[name='radioId'][@checked]“).get(0).value
3,获取text value值:$(”#textId”).get(0).value

获取表单元素值主要是jQuery中get()对象访问方法,其次是each()方法,记住一点:$(#id)产生的是一个对象,获取其中的值完全可以使用jQuery对象访问方法。
jQuery对象访问方法列表如下:
1,each()循环,相当于foreach;
2,size()统计个数;
3,length()统计个数;
4,get()单个或多个;
5,index()索引;

jQuery提供丰富的object对象访问方法,通过对访问对象方法的掌握,轻松获取selected,checked,text等表单值。
分享到:
评论

相关推荐

    form表单复选框取值

    在JS中,我们可以使用jQuery库来方便地获取选中的复选框的值。例如,通过`$('input[name="ch"]:checked')`选择器找到所有`name="ch"`且被选中的复选框,然后使用`.val()`方法获取其对应的值。 ```javascript // ...

    使用FormData实现上传多个文件

    JavaScript部分使用jQuery监听表单的提交事件,并在文件选择改变时更新文件列表。当用户点击“提交”按钮,`sendFile`函数会被调用,该函数创建一个新的`FormData`对象,并将所有选定的文件添加到其中: ```...

    Framework学习文档

    3)表单enctype属性必须为multipart/form-data。 二、Mybatis框架 1. MyBatis是一个基于Java的持久层框架,简化了JDBC对数据库的操作。 2. MyBatis的功能:封装原生的JDBC代码,对数据库中的数据进行管理(CRUD)...

    php程序员面试题(含html、JavaScript、php和mysql)

    **解析:**该语句调用了名为 `formName` 的表单的 `submit` 方法,用于提交表单数据。 #### 表单事件 **问题:**把鼠标移到文本框时,文本框中的内容自动全选。 **解析:**可以使用 `onfocus` 或 `onmouseover` ...

    ExtAspNet_v2.3.2_dll

    -增加示例:form/form_validate.aspx +2009-10-19 v2.1.3 +增加支持在AJAX时改变的控件属性列表(/ajax.aspx)。 -ExtAspNet支持原生的AJAX,也就是说控件的属性改变在AJAX过程中会反映到页面中,但并不是...

    ExtAspNet v2.2.1 (2009-4-1) 值得一看

    -这样所有需要占据全屏的Panel(不管你是Accordion,Panel,ContentPanel,Form,GroupPanel,SimpleForm,Tree还是Grid,TabStrip)都可以通过这种方式全屏。 -简单方便,示例可以参考 default.aspx 或者 other\...

Global site tag (gtag.js) - Google Analytics