jQuery操作Form表单元素
2015-07-27 09:13
531 查看
Web开发中经常需要操作表单,form表单元素有select、checkbox、radio、textarea、button、file、text、hidden、password等。其中checkbox和radio的读写值操作比较多变,checkbox和radio经常用在一个分组里,实现多选或者单选。jQuery提供了利用表单选择器我们可以极其方便地获取表单的某个或某类型的元素。
下面介绍select、checkbox和radio的用法。
对select的操作
选择器 | 返回 | 示例 |
---|---|---|
:input | 集合元素 | $(“:input”)选取所有,,和元素。 |
:text | 单行文本框集合 | $(“:text”)选取所有的单行文本框。 |
:password | 密码框集合 | $(“:password”)选取所有的密码框。 |
:radio | 单行文本框集合 | $(“:radio”)选取所有的单选框。 |
:checkbox | 复选框集合 | $(“:checkbox”)选取所有的复选框。 |
:submit | 提交按钮集合 | $(“:submit”)选取所有的提交按钮。 |
:image | 图片按钮集合 | $(“:image”)选取所有的图片按钮。 |
:reset | 重置按钮集合 | $(“:reset”)选取所有的重置按钮。 |
:button | 按钮集合 | $(“:button”)选取所有的按钮。 |
:file | 上传域集合 | $(“:file”)选取所有的上传域。 |
:hidden | 不可见元素集合 | $(“:hidden”)选取所有的不可见元素。 |
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(function(){})与(function(){})(jQuery)的区别
- eclipse安装spket插件提示js和jQuery代码
- 9 个超实用的 jQuery 代码片段
- 【jQuery】复选框的批量处理:全选、非全选
- jquery相关
- jQuery实现图片与文字描述左右滑动自动切换的方法
- jQuery实现鼠标滑向当前图片高亮显示并且其它图片变灰的方法
- jquery实现TAB选项卡鼠标经过带延迟效果的方法
- JQUERY实现网页右下角固定位置展开关闭特效的方法
- jquery实现在线考试js
- jquery post请求向后台传数组
- jQuery阻止冒泡和HTML默认操作
- jQuery攻略
- JQuery日历控件
- jQuery(三)
- jQuery的.bind()、.live()和.delegate()之间区别
- jQuery+Ajax+Jsp做二级级联
- freemarker的学习
- jquery表单验证插件
- MediaElement教程