jQuery操作Form表单元素

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 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当前选中项的值
$(‘#select‘).val();

//获取select当前选中项的文本
$(‘#select‘).children(‘option:selected‘).text();

//设置select选中值为3的option
$(‘#select‘).val(‘3‘);

//设置select选中文本为武汉的option
$(‘#select‘).children(‘option:contains(武汉)‘).attr(‘selected‘, ‘selected‘);

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‘));
    });
});

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);
});

form

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

<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()));
});
时间: 2024-10-12 23:44:24

jQuery操作Form表单元素的相关文章

jQuery控制form表单元素聚焦

CreateTime--2017年5月28日08:57:16Author:Marydon jQuery使form表单的第一个文本框聚焦 /** * 使form表单的第一个文本框聚焦 */ function makeFirstTextFormElementFocused (formId) { $('#' + formId + ' :text').eq(0).focus(); } 测试: window.onload = function() { makeFirstTextFormElementFoc

Jquery学习笔记:操作form表单元素之二(复选框和单选框)

在上面文章的基础上,我们介绍如何操作表单元素中的 复选框和单选框. 一.复选框 <label> <input type="checkbox" id="item" checked> 全选</label> 注意,input标签要放在label标签内,这样点击文字时也会有反映. 如果选中了,调用  $("#item").prop("checked")返回true,否则返回false 同样利用pro

第83天:jQuery中操作form表单

操作form表单 1. 属性操作 设置属性: // 第一个参数表示:要设置的属性名称 // 第二个参数表示:该属性名称对应的值 $(selector).attr("title", "传智播客"); 获取属性: // 参数为:要获取的属性的名称,改操作会返回指定属性对应的值 $(selector).attr("title"); 此时,返回指定属性的值 移除属性: // 参数为:要移除的属性的名称 $(selector).removeAttr(&qu

Python之路【第十三篇续】jQuery案例-Form表单&amp;插件及扩展

jQuery案例-Form表单 学完这个form表单的案例,如果有人说这个表单(功能)还不够NB(此文不包含样式,样式是CSS比较简单可以根据需求自己添加),那么找武Sir他帮你搞定. 一步一步来 注意事项(目录结构): 在写前端html代码的时候要注意(任何代码都一样),一定要规划好目录结构方便其他的人来看你的代码! 如果还有其他的html页面可以在加一个html存储的文件夹. 1.首先看下HTML主体 <!DOCTYPE html> <html lang="en"

jquery序列化form表单使用ajax提交后处理返回的json数据

这篇文章主要介绍了jquery序列化form表单,使用ajax提交后处理返回的json数据的示例,需要的朋友可以参考下 1.返回json字符串: ** 将一个字符串输出到浏览器 */    protected void writeJson(String json) {        PrintWriter pw = null;        try {            servletResponse.setContentType("text/plain;charset=UTF-8"

jQuery实现form表单基于ajax无刷新提交方法详解

本文实例讲述了jQuery实现form表单基于ajax无刷新提交方法.分享给大家供大家参考,具体如下: 首先,新建Login.html页面: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.o

jquery将form表单序列化常json

var formData = {};$.each(form.serializeArray(),function(i, item){ formData[item.name] = item.value;}); $.ajax({ cache: true, type: "POST", url:ajaxCallUrl, data:$('#yourformid').serialize(),// 你的formid async: false, error: function(request) { al

Jquery学习笔记:操作form表单元素之一(文本框和下拉框)

一.概述 在web页面开发中,经常需要获取和设置表单元素的值(如文本框中的内容),特别是在ajax应用中,更是常态.本文系统的介绍下如何操作. 同操作其它html元素一样,操作的过程差不多. 第一步,需要获取到表单元素对应的jquery(或dom)对象.这个主要是利用jquery的选择器机制. 第二步,调用表单元素的属性和方法来获取和设置值. 其中最常见的就是利用jquery对象的val方法.因为很多表单元素都有标准的 value属性,这个可以通过jquery的 val方法来读取和设置属性值.

Python之路【第十三篇】jQuery案例-Form表单&amp;插件及扩展

学完这个form表单的案例,如果有人说这个表单(功能)还不够NB(此文不包含样式,样式是CSS比较简单可以根据需求自己添加),那么找武Sir他帮你搞定. 一步一步来 注意事项(目录结构): 在写前端html代码的时候要注意(任何代码都一样),一定要规划好目录结构方便其他的人来看你的代码! 如果还有其他的html页面可以在加一个html存储的文件夹. 1.首先看下HTML主体 <!DOCTYPE html> <html lang="en"> <head>