Web开发中常常须要操作表单，form表单元素有select、checkbox、radio、textarea、button、file、text、hidden、password等。

当中checkbox和radio的读写值操作比較多变，checkbox和radio常常常使用在一个分组里。实现多选或者单选。

jQuery提供了利用表单选择器我们能够极其方便地获取表单的某个或某类型的元素。

选择器	返回	演示样例
:input	集合元素	$(“:input”)选取全部,,和元素。
:text	单行文本框集合	$(“:text”)选取全部的单行文本框。
:password	密码框集合	$(“:password”)选取全部的密码框。
:radio	单行文本框集合	$(“:radio”)选取全部的单选框。
:checkbox	复选框集合	$(“:checkbox”)选取全部的复选框。
:submit	提交按钮集合	$(“:submit”)选取全部的提交按钮。
:image	图片按钮集合	$(“:image”)选取全部的图片按钮。
:reset	重置按钮集合	$(“:reset”)选取全部的重置按钮。
:button	按钮集合	$(“:button”)选取全部的按钮。
:file	上传域集合	$(“:file”)选取全部的上传域。
:hidden	不可见元素集合	$(“:hidden”)选取全部的不可见元素。

以下介绍select、checkbox和radio的使用方法。

select

select元素内容例如以下

    北京    上海    武汉    南京    广州    深圳

对select的操作

//获取select当前选中项的值$('#select').val();//获取select当前选中项的文本$('#select').children('option:selected').text();//设置select选中值为3的option$('#select').val('3');//设置select选中文本为武汉的option$('#select').children('option:contains(武汉)').attr('selected', 'selected');

checkbox

      
    
       
        
        
选择最喜欢的城市
        
        
         
         北京
        
        
        
         
         上海
        
        
        
         
         南京
        
        
        
         
         深圳
        
        
        
         
         广州
        
        
        
         
         武汉
        
    
       
      
      
    
       获取选择的checkbox    
       选择深圳和广州    
       全选    
       全不选    
       反选
      

//获取选择的checkbox值$('#btnCheckbox1').click(function(){
          var values = [];    $('#checkboxGroup').find(':checkbox:checked').each(function(){
              values.push($(this).val());    });    alert(values.join(','));});//选择深圳和广州$('#btnCheckbox2').click(function(){
          var $group = $('#checkboxGroup');    $group.find(':checkbox').each(function(){
              var $this = $(this), val = $this.val();        if(val === '深圳' || val === '广州'){            $this.prop('checked', true);        }else{            $this.prop('checked', false);        }    });});//全选$('#btnCheckbox3').click(function(){
          var $group = $('#checkboxGroup');    $group.find(':checkbox').prop('checked', true);});//全不选$('#btnCheckbox4').click(function(){
          var $group = $('#checkboxGroup');    $group.find(':checkbox').prop('checked', false);});//反选$('#btnCheckbox5').click(function(){
          var $group = $('#checkboxGroup');    $group.find(':checkbox').each(function(){
              var $this = $(this);        $this.prop('checked', !$this.prop('checked'));    });});

radio

      
    
       
        
        
选择最喜欢的城市
        
        
         
         北京
        
        
        
         
         上海
        
        
        
         
         南京
        
        
        
         
         深圳
        
        
        
         
         广州
        
        
        
         
         武汉
        
    
       
      
      
    
       获取选择的radio    
       选择上海
      

//获取当前选择的radio值$('#btnRadio1').click(function(){
          var group = $('#radioGroup'),        value = group.find(':radio:checked').val();    alert(value);});//选择上海$('#btnRadio2').click(function(){
          $('#radioGroup').find(':radio[value="上海"]').prop('checked', true);});

form

jQuery提供了serialize()和serializeArray()获取form表单元素的值，serialize()把获取的值拼接成字符串，serializeArray()返回数组。

      
    
       
        姓名：
        
       
    
       
        年龄：
        
       
    
       
                性别：        
                    男            女            保密            
       
    
       
        
        
最喜欢的城市
        
        
         
         广州
        
        
        
         
         深圳
        
        
        
         
         上海
        
    
       
    
       
        
        
喜欢的运动
        
        
         
         足球
        
        
        
         
         篮球
        
        
        
         
         羽毛球
        
        
        
         
         乒乓球
        
    
       
     
      
      
    
       提交    
       重置    
       获取form的值
      

//提交$('#btnSubmit').click(function(){
          $('#form').submit();});//重置$('#btnReset').click(function(){
          //因为jQuery没有提供reset方法，仅仅能用form原生的reset方法。    $('#form').get(0).reset();});//获取form的值$('#btnFormValue').click(function(){
          alert(decodeURIComponent($('#form').serialize()));});