form表单的元素操作，序列化和使用方法

最新推荐文章于 2024-08-16 08:26:00 发布

the_lone_wolf

最新推荐文章于 2024-08-16 08:26:00 发布

阅读量772

点赞数

查看原文：http://www.ibloger.net/article/400.html http://blog.csdn.net/xiaokui_wingfly/article/details/51721711

Web开发中经常需要操作表单，form表单元素有select、checkbox、radio、textarea、button、file、text、hidden、password等。其中checkbox和radio的读写值操作比较多变，checkbox和radio经常用在一个分组里，实现多选或者单选。jQuery提供了利用表单选择器我们可以极其方便地获取表单的某个或某类型的元素。
这里写图片描述

select

select元素内容如下

<select id="select">
    <option value="0">北京</option>
    <option value="1">上海</option>
    <option value="2">武汉</option>
    <option value="3">南京</option>
    <option value="4">广州</option>
    <option value="5" selected="selected">深圳</option>
</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');
 
 1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20

checkbox

<div>
    <fieldset id="checkboxGroup">
        <legend>选择最喜欢的城市</legend>
        <div><input type="checkbox" name="city" value="北京" /><span>北京</span></div>
        <div><input type="checkbox" name="city" value="上海" /><span>上海</span></div>
        <div><input type="checkbox" name="city" value="南京" /><span>南京</span></div>
        <div><input type="checkbox" name="city" value="深圳" /><span>深圳</span></div>
        <div><input type="checkbox" name="city" value="广州" /><span>广州</span></div>
        <div><input type="checkbox" name="city" value="武汉" /><span>武汉</span></div>
    </fieldset>
</div>
<div style="margin-top:20px;">
    <button id="btnCheckbox1">获取选择的checkbox</button>
    <button id="btnCheckbox2">选择深圳和广州</button>
    <button id="btnCheckbox3">全选</button>
    <button id="btnCheckbox4">全不选</button>
    <button id="btnCheckbox5">反选</button>
</div>

//获取选择的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'));
    });
});
 
 1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63

radio

<div>
    <fieldset id="radioGroup">
        <legend>选择最喜欢的城市</legend>
        <div><input type="radio" name="city" value="北京" /><span>北京</span></div>
        <div><input type="radio" name="city" value="上海" /><span>上海</span></div>
        <div><input type="radio" name="city" value="南京" /><span>南京</span></div>
        <div><input type="radio" name="city" value="深圳" /><span>深圳</span></div>
        <div><input type="radio" name="city" value="广州" /><span>广州</span></div>
        <div><input type="radio" name="city" value="武汉" /><span>武汉</span></div>
    </fieldset>
</div>
<div style="margin-top:20px;">
    <button id="btnRadio1">获取选择的radio</button>
    <button id="btnRadio2">选择上海</button>
</div>

//获取当前选择的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);
});
 
 1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27

form
jQuery提供了serialize()和serializeArray()获取form表单元素的值，serialize()把获取的值拼接成字符串，为用&链接的字符串，id=3&name=张三&sex=男，serializeArray()返回数组。serializeArray()将每个空间封装为一个对象，对象中存在两个字段，name和value。

<form id="form">
    <div>姓名：<input type="text" name="name" /></div>
    <div>年龄：<input type="text" name="age" /></div>
    <div>
        性别：
        <select name="sex">
            <option value="男">男</option>
            <option value="女">女</option>
            <option value="保密" selected="selected">保密</option>
        </select>
    </div>
    <fieldset>
        <legend>最喜欢的城市</legend>
        <div><input type="radio" name="city" value="广州" /><span>广州</span></div>
        <div><input type="radio" name="city" value="深圳" /><span>深圳</span></div>
        <div><input type="radio" name="city" value="上海" checked="checked" /><span>上海</span></div>
    </fieldset>
    <fieldset>
        <legend>喜欢的运动</legend>
        <div><input type="checkbox" name="sports" value="足球" /><span>足球</span></div>
        <div><input type="checkbox" name="sports" value="篮球" /><span>篮球</span></div>
        <div><input type="checkbox" name="sports" value="羽毛球" /><span>羽毛球</span></div>
        <div><input type="checkbox" name="sports" value="乒乓球" /><span>乒乓球</span></div>
    </fieldset>     
</form>
<div style="margin-top:20px;">
    <button id="btnSubmit">提交</button>
    <button id="btnReset">重置</button>
    <button id="btnFormValue">获取form的值</button>
</div>

//提交
$('#btnSubmit').click(function(){
    $('#form').submit();
});

//重置
$('#btnReset').click(function(){
    //由于jQuery没有提供reset方法，只能用form原生的reset方法。
    $('#form').get(0).reset();
});

//获取form的值
$('#btnFormValue').click(function(){
    alert(decodeURIComponent($('#form').serialize()));//值为用&链接的字符串，id=3&name=张三&sex=男
});