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 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');
- <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'));
- });
- });
- <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);
- });
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()));
- });
来源: http://www.bubuko.com/infodetail-2228576.html