注册 登录  
 加关注
   显示下一条  |  关闭
温馨提示!由于新浪微博认证机制调整,您的新浪微博帐号绑定已过期,请重新绑定!立即重新绑定新浪微博》  |  关闭

88AVI-WEBZONE8-天空网

是金子总要发光的,但是当满地都是金子的时候,我自己也不知道自己是哪颗了

 
 
 

日志

 
 
关于我

两个人交谈,一个人可以洗耳恭听。但是,三个人则无法互谈这人世最严肃而应深究的事。 我们应该注意自己不用语言去伤害别的同志,但是,当别人用语言来伤害自己的时候,也应该受得起。 要对别人隐瞒我们知识的局限,最可靠的方法就是不要越过那界限。 不登高山,不知天之高也,不临深溪,不知地之厚也。 不飞则已,一飞冲天,不鸣则已,一鸣惊人!!!!!

网易考拉推荐

掌握jQuery获取selected,checked,text等表单值  

2009-10-03 04:45:41|  分类: js |  标签: |举报 |字号 订阅

  下载LOFTER 我的照片书  |

表单实例:

一,html部分

  1. <form>
  2. <!– 获取select的selected值 biuuu.com–>
  3. <select id=”selectId“>
  4. <option value=”biuuu_s1″>s1</option>
  5. <option value=”biuuu_s2″>s2</option>
  6. <option value=”biuuu_s3″>s3</option>
  7. <option value=”biuuu_s4″>s4</option>
  8. </select>
  9. <input type=”button” id=”sButtonId” value=”获取selected值” />
  10. <span id=”sResult“></span><br />
  11. <!– 获取checkbox的checked值 biuuu.com–>
  12. <input type=”checkbox” name=”checkboxId” value=”biuuu_c1″ />c1
  13. <input type=”checkbox” name=”checkboxId” value=”biuuu_c2″ />c2
  14. <input type=”checkbox” name=”checkboxId” value=”biuuu_c3″ />c3
  15. <input type=”checkbox” name=”checkboxId” value=”biuuu_c4″ />c4
  16. <input type=”button” id=”cButtonId” value=”获取checkbox值” />
  17. <span id=”cResult“></span><br />
  18. <!– 获取radio的checked值 biuuu.com–>
  19. <input type=”radio” name=”radioId” value=”biuuu_r1″ />r1
  20. <input type=”radio” name=”radioId” value=”biuuu_r2″ />r2
  21. <input type=”radio” name=”radioId” value=”biuuu_r3″ />r3
  22. <input type=”button” id=”rButtonId” value=”获取radio值” />
  23. <span id=”rResult“></span><br />
  24. <!– 获取text的value值 biuuu.com–>
  25. <input type=”text” id=”textId” value=”" />
  26. <input type=”button” id=”tButtonId” value=”获取text值” />
  27. <span id=”tResult“></span>
  28. </form>

二,JS部分

  1. $(document).ready(function(){
  2. $(”#sButtonId“).click(function(){
  3. //获取select对象
  4. var selectedObj = $(”#selectId option:selected”);
  5. //获取当前selected的值
  6. var selected = selectedObj.get(0).value;
  7. $(”#sResult”).html(”结果:”+selected);
  8. });
  9. $(”#cButtonId“).click(function(){
  10. //获取checkBox对象
  11. var Check = ”;
  12. var checkedObj = $(”[name='checkboxId'][@checked]“);
  13. //获取当前checked的value值 如果选中多个则循环
  14. checkedObj.each(function(){
  15. var isCheck = this.value;
  16. Check += isCheck;
  17. });
  18. $(”#cResult”).html(”结果:”+Check);
  19. });
  20. $(”#rButtonId“).click(function(){
  21. //获取radio对象
  22. var radioObj = $(”[name='radioId'][@checked]“);
  23. //获取当前checked的value值
  24. var radio = radioObj.get(0).value;
  25. $(”#rResult”).html(”结果:”+radio);
  26. });
  27. $(”#tButtonId“).click(function(){
  28. //获取text对象
  29. var textObj = $(”#textId”);
  30. //获取当前text的value值
  31. var text = textObj.get(0).value;
  32. $(”#tResult”).html(”结果:”+text);
  33. });
  34. });

实例效果如下:

掌握jQuery获取selected,checked,text等表单值 - BestLoveSky - BestLoveSky-王殿臣-小客厅

其操作过程如下:

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等表单值。

  评论这张
 
阅读(1950)| 评论(0)
推荐 转载

历史上的今天

在LOFTER的更多文章

评论

<#--最新日志,群博日志--> <#--推荐日志--> <#--引用记录--> <#--博主推荐--> <#--随机阅读--> <#--首页推荐--> <#--历史上的今天--> <#--被推荐日志--> <#--上一篇,下一篇--> <#-- 热度 --> <#-- 网易新闻广告 --> <#--右边模块结构--> <#--评论模块结构--> <#--引用模块结构--> <#--博主发起的投票-->
 
 
 
 
 
 
 
 
 
 
 
 
 
 

页脚

网易公司版权所有 ©1997-2017