jQuery获取及设置单选框,多选框,文本框内容

http://hefeng1987-net-163-com.iteye.com/blog/1479427

在工作中,text,radio,checkbox,select在开发过程中是必不可少的一部分.在开发过程中经常要处理页面表单元素. 
Eg: 
   在复选框checkBox中获取checked的value值,来触发和调用其它页面表单元素,制作互动性更强更友好的用户体验. 
jQuery通过元素$(#id)产生一个object对象,通过对获取的对象输入了解,获取任何元素中的任何信息. 
为了以后工作方便,我总结了相关jQuery操作object对象的方法,获取下拉框selected,复选框checkBox,文本框text,radio value值 

其操作过程: 
   1.jQuery获取object对象,(select对象,checkbox对象,text对象) 
   2.获取对象值,对于值唯一的元素,如:select,text通过get()方法获取value值.(get(0)如同数组下标,默认值是从0开始),对于数据元素,如checkbox通过each循环获取value值 
   3.获取表单元素值主要是jQuery中get()对象访问方法,其次是each()方法,$(#id)产生的是一个对象,获取其中的hi完全可以使用jQuery对象访问方法. 
    (1).each()循环,相当于foreach; 
    (2).size()统计个数 
    (3).length()统计个数 
    (4).get()单个或多个 
    (5).index()索引 

载入jQuery库的最佳方法 

Java代码  收藏代码
  1. <SCRIPT type=text/javascript src="http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js"></SCRIPT>  
  2. <script type="text/javascript">!window.jQuery && document.write('<script type="text/javascript" src="/js/jquery-1.4.4.min.js"><\/script>');</script>  


Error: uncaught exception: Syntax error, unrecognized expression: [@type='radio'] 
在Jquery-1.4.2版使用该方法会报错,“name”属性前不用加“@”符号。 
Eg:      $("input[name=radioId]:radio").attr("checked",'r2');//设置value=r2的项目为当前选中项     $("input[@type=radio][value=r2]").attr("checked",'checked');  //设置value=r2的项目为当前选中项 

Java代码  收藏代码
  1. <%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>  
  2. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">  
  3. <html xmlns="http://www.w3.org/1999/xhtml">  
  4. <head>  
  5. <title>jQuery教程基础篇之强大的选择器-过滤选择器-表单对象属性过滤选择器</title>  
  6. <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />  
  7. <SCRIPT type=text/javascript src="http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js"></SCRIPT>  
  8. <script type="text/javascript">!window.jQuery && document.write('<script type="text/javascript" src="/js/jquery-1.4.4.min.js"><\/script>');</script>  
  9. <script type="text/javascript">  
  10.     $(document).ready(function(){  
  11.     //对表单内 可用input 赋值操作.  
  12.     $('#btn1').click(function(){  
  13.         alert(document.getElementById("add").value);  
  14.         $("#form1 input:enabled").val("这里变化了！");  
  15.         return false;  
  16.     })  
  17.     //对表单内 不可用input 赋值操作.  
  18.     $('#btn2').click(function(){  
  19.         //获得当前text文本框的value值  
  20.         //$("#email").get(0).value;  
  21.         alert($("#email").attr("value"));  
  22.         $("#form1 input:disabled").val("这里变化了！");  
  23.         return false;  
  24.     })  
  25.   
  26.     //使用:checked选择器，来操作多选框.  
  27.     $(":checkbox").click(countChecked);  
  28.     function countChecked() {  
  29.         //多选框checkbox  
  30.         $("#chk2").attr("checked",true); //checkbox选中  
  31.         var n = $("input:checked").length;  
  32.         $("div").eq(0).html("[b]有"+n+" 个被选中![/b]");  
  33.     }  
  34.   
  35.     countChecked();//进入页面就调用.  
  36.   
  37.     //使用:selected选择器，来操作下拉列表.  
  38.     $("select").change(function () {  
  39.         var str = "";  
  40.         //后迭代器 =====>选取select里面的元素  
  41.         $("select :selected").each(function () {  
  42.             str += $(this).text() + ",";  
  43.         });  
  44.         alert(str);  
  45.         //获得selected值  
  46.         var sele = $("#selectId option:selected").get(0).value;  
  47.         alert(sele);  
  48.         $("div").eq(1).html("[b]你选中的是："+str+"[/b]");  
  49.           
  50.     }).trigger('change');  
  51.       
  52.     //获得radio对象  
  53.     $("#rButtonId").click(function(){  
  54.         var radioObj = $("[name='radioId']:checked");//获取当前checked的value值  
  55.         var radio = radioObj.get(0).value;  
  56.         //var radioObj = $("[name='radioId']:checked").get(0).value;  
  57.          $("#rResult").html("结果:"+radio);  
  58.     });  
  59.       
  60.     //Jquery1.4.2之后的版本,"name","value"前不用加"@"符号.  
  61.     //error:uncaught exception: Syntax error, unrecognized expression: [@type='radio']  
  62.     $("input[name=radioId]:radio").attr("checked",'r2');//设置value=r2的项目为当前选中项  
  63.     //$("input[@type=radio][value=r2]").attr("checked",'checked');  //设置value=r2的项目为当前选中项  
  64. });  
  65. </script>  
  66. </head>  
  67. <body>  
  68. <h3> 表单对象属性过滤选择器.</h3>  
  69.   
  70. <form id="form1" action="#">  
  71.     <button type="reset">重置所有表单元素</button>  
  72.       
  73.   
  74.   
  75.     <button id="btn1">对表单内 可用input 赋值操作.</button>  
  76.     <button id="btn2">对表单内 不可用input 赋值操作.</button>  
  77.   
  78.   
  79.     可用元素：<input type="text" name="add" id="add" value="可用文本框"/>  <br/>  
  80.     不可用元素：<input type="text" name="email" id="email" disabled="disabled" value="不可用文本框"/><br/>  
  81.     <br/>  
  82.     <!-- 获取checkbox的checked值 -->  
  83.     多选框：<br/>  
  84.     <input type="checkbox" name="newsletter" checked="checked" value="test1" />test1  
  85.     <input type="checkbox" name="newsletter" value="test2" id="chk2"/>test2  
  86.     <input type="checkbox" name="newsletter" value="test3" />test3  
  87.     <input type="checkbox" name="newsletter" checked="checked" value="test4" />test4  
  88.     <input type="checkbox" name="newsletter" value="test5" />test5  
  89.     <div></div>  
  90.   
  91.     <br/><br/>  
  92.     <!-- 获取select的selected值 -->  
  93.     下拉列表2：<br/>  
  94.     <select id="selectId" >  
  95.         <option>浙江</option>  
  96.         <option>湖南</option>  
  97.         <option selected="selected" >北京</option>  
  98.         <option>天津</option>  
  99.         <option>广州</option>  
  100.         <option>湖北</option>  
  101.     </select>  
  102.     <br/><br/>  
  103.     <div></div>  
  104.               
  105.       
  106.   
  107.     <input type="radio" name="radioId" value="r1" />  
  108.     r1  
  109.     <input type="radio" name="radioId" value="r2" />  
  110.     r2  
  111.     <input type="radio" name="radioId" value="r3" />  
  112.     r3  
  113.     <input type="button" id="rButtonId" value="获取radio值" />  
  114.     <span id="rResult"></span>  
  115.     </form>  
  116. </body>  
  117. </html>  
posted @ 2012-07-20 13:46  haiwei.sun  阅读(1622)  评论(0)  编辑  收藏  举报
返回顶部