Jquery入门三：表单对象操作

Jquery中的val(),text(),html()是对javascrip中的value、innerText、innerHtml三个属性的封装，在Jquery中这三个函数如果有参数的话就是赋值操作，没有参数则是取值操作，其中val()是一个很重要的方法，和它相关的表单对象如：input系的标签、select、textarea等都是用于和服务器端交互的标签元素，所以要搞清楚这个val（）；

对于radio、checkbox、select的赋值操作：

1
$("input[name=a]").val(["娱乐1"]); 

2
$("input[type=checkbox]").val(["篮球", "游戏"]); 

3
$("select").val(["篮球", "游戏"]);

代码分析：

对radio赋值，属性选择器获取radio；

对checkbox赋值，属性选择器获取checkbox,赋值用中括号[],如果是多个值的话中间用逗号隔开；

对select赋值,通过标签选择器获取select，

对于radio、checkbox、select的取值操作：

01
var checkvalue = ""; 

02
               var s = $("input[name=a]:checked").val(); 

03
                 
04
               $(":checkbox:checked").each(function() { 

05
                   checkvalue += $(this).val(); 

06
               }); 

07
               var selectvalue = ""; 

08
               $("select :selected").each(function() { 

09
                  
10
                   selectvalue += $(this).val(); 

11
               }); 

12
                
13
               alert("checkvalue:" + checkvalue + "radiovalue:" + s + "selectvalue:" + selectvalue);

代码分析：

声明一个s的变量用于接收name=a的radio的被选正的值，也可以写作var s=$(":radio:checked").val()，:radio可以理解为type=radio的input元素，是属性选择器的一种简化写法;

获取checkbox的被选中的值，因为checkbox是一个多选框，所以要用each对每一个选中项进行处理，也可以根据属性选择器写作： $("input[type=checkbox]:checked")；

对于select当属性multiple ="multiple"时，可以多选，这里也用each进行遍历处理；

小结：

对于input系的标签元素我们可以使用属性选择器获取： $("input[type=checkbox]")，也可以通过简洁的方式: $(":checkbox"),类似的有：
:radio、:submit、:image、:reset、:button、:file、:hidden、:password、:text;

$(":input")选取所有的<input> <textarea> <select>和<button>元素
对于radio、checkbox获取被选正的项用:checked,而对于select则用:selected( $("select :selected")、 $(":radio:checked").val();)

01
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 

02
  
03
<html xmlns="http://www.w3.org/1999/xhtml"> 

04
<head> 

05
    <title></title> 

06
  
07
    <script src="../myjs/jquery-1.4.2-vsdoc.js" type="text/javascript"></script> 

08
    <script  type ="text/javascript" > 

09
        $(function() { 

10
  
11
            $(":button[value=取值]").click(function() { 

12
                var checkvalue = ""; 

13
                //var s = $("input[name=a]:checked").val(); 

14
                var s = $(":radio:checked").val(); 

15
                $("input[type=checkbox]:checked").each(function() { 

16
                    checkvalue += $(this).val(); 

17
                }); 

18
                var selectvalue = ""; 

19
                $("select :selected").each(function() { 

20
  
21
                    selectvalue += $(this).val(); 

22
                }); 

23
  
24
                alert("checkvalue:" + checkvalue + "radiovalue:" + s + "selectvalue:" + selectvalue); 

25
            }); 

26
            $(":button[value=设置]").click(function() { 

27
                $("input[name=a]").val(["娱乐1"]); 

28
                $("input[type=checkbox]").val(["篮球", "游戏"]); 

29
                $("select").val(["篮球", "游戏"]); 

30
            }); 

31
        }); 

32
         
33
  
34
  
35
         
36
    </script> 

37
</head> 

38
<body> 

39
 <input  type ="checkbox" id="footbal"  value="足球"/><label  for ="footbal">足球</label><br /> 

40
  <input  type ="checkbox"  value="篮球" />篮球<br /> 

41
  <input  type ="checkbox"value="看书" />看书<br /> 

42
  <input  type ="checkbox" value="游戏"/>游戏<br /><hr /> 

43
  <input  type ="radio"  name ="a" id="b" value ="娱乐1" /><label  for ="b">娱乐1</label><br /> 

44
   <input  type ="radio"  name ="a"  value ="娱乐2" />娱乐2<br /> 

45
    <input  type ="radio"  name ="a"  value ="娱乐3" />娱乐3<br /> 

46
    <hr /> 

47
      
48
    <select    multiple ="multiple" > 

49
      <option value ="篮球">篮球</option> 

50
      <option value ="足球">足球</option> 

51
      <option value ="看书">看书</option> 

52
      <option value ="游戏">游戏</option> 

53
    </select> 

54
    <input  type ="button"  value="取值"/> <input  type ="button"  value="设置"/> 

55
</body> 

56
</html>

posted @ 2011-01-17 11:43 rob_2010 阅读(119) 评论(0) 收藏举报

刷新页面返回顶部

刚子

Jquery入门三：表单对象操作

公告