jQuery操作Form表单元素

页面导航:首页 > 网络编程 > JavaScript > jQuery操作Form表单元素

jQuery操作Form表单元素

来源: 作者: 时间:2016-02-01 09:32 【

Web开发中经常需要操作表单,form表单元素有select、checkbox、radio、textarea、button、file、text、hidden、password等。其中checkbox和radio的读写值操作比较多变,checkbox和radio经常用在一个分组里,

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值
$('#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值
$('#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()返回数组。


姓名:
年龄:
性别:
最喜欢的城市
广州
深圳
上海
喜欢的运动
足球
篮球
羽毛球
乒乓球
//提交
$('#btnSubmit').click(function(){
    $('#form').submit();
});

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

//获取form的值
$('#btnFormValue').click(function(){
    alert(decodeURIComponent($('#form').serialize()));
});

 

Tags:

文章评论

最 近 更 新
热 点 排 行
Js与CSS工具
代码转换工具

<