jQuery操作Form表单元素
Posted liguangsunls
tags:
篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了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()));
});
以上是关于jQuery操作Form表单元素的主要内容,如果未能解决你的问题,请参考以下文章