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元素内容如下
1 <select id="select"> 2 <option value="0">北京</option> 3 <option value="1">上海</option> 4 <option value="2">武汉</option> 5 <option value="3">南京</option> 6 <option value="4">广州</option> 7 <option value="5" selected="selected">深圳</option> 8 </select>
对select的操作
1 //获取select当前选中项的值 2 $('#select').val(); 3 4 //获取select当前选中项的文本 5 $('#select').children('option:selected').text(); 6 7 //设置select选中值为3的option 8 $('#select').val('3'); 9 10 //设置select选中文本为武汉的option 11 $('#select').children('option:contains(武汉)').attr('selected', 'selected');
checkbox
1 <div> 2 <fieldset id="checkboxGroup"> 3 <legend>选择最喜欢的城市</legend> 4 <div><input type="checkbox" name="city" value="北京" /><span>北京</span></div> 5 <div><input type="checkbox" name="city" value="上海" /><span>上海</span></div> 6 <div><input type="checkbox" name="city" value="南京" /><span>南京</span></div> 7 <div><input type="checkbox" name="city" value="深圳" /><span>深圳</span></div> 8 <div><input type="checkbox" name="city" value="广州" /><span>广州</span></div> 9 <div><input type="checkbox" name="city" value="武汉" /><span>武汉</span></div> 10 </fieldset> 11 </div> 12 <div style="margin-top:20px;"> 13 <button id="btnCheckbox1">获取选择的checkbox</button> 14 <button id="btnCheckbox2">选择深圳和广州</button> 15 <button id="btnCheckbox3">全选</button> 16 <button id="btnCheckbox4">全不选</button> 17 <button id="btnCheckbox5">反选</button> 18 </div>
1 //获取选择的checkbox值 2 $('#btnCheckbox1').click(function(){ 3 var values = []; 4 $('#checkboxGroup').find(':checkbox:checked').each(function(){ 5 values.push($(this).val()); 6 }); 7 8 alert(values.join(',')); 9 }); 10 11 //选择深圳和广州 12 $('#btnCheckbox2').click(function(){ 13 var $group = $('#checkboxGroup'); 14 15 $group.find(':checkbox').each(function(){ 16 var $this = $(this), val = $this.val(); 17 if(val === '深圳' || val === '广州'){ 18 $this.prop('checked', true); 19 }else{ 20 $this.prop('checked', false); 21 } 22 }); 23 }); 24 25 //全选 26 $('#btnCheckbox3').click(function(){ 27 var $group = $('#checkboxGroup'); 28 $group.find(':checkbox').prop('checked', true); 29 }); 30 31 //全不选 32 $('#btnCheckbox4').click(function(){ 33 var $group = $('#checkboxGroup'); 34 $group.find(':checkbox').prop('checked', false); 35 }); 36 37 //反选 38 $('#btnCheckbox5').click(function(){ 39 var $group = $('#checkboxGroup'); 40 $group.find(':checkbox').each(function(){ 41 var $this = $(this); 42 $this.prop('checked', !$this.prop('checked')); 43 }); 44 });
radio
1 <div> 2 <fieldset id="radioGroup"> 3 <legend>选择最喜欢的城市</legend> 4 <div><input type="radio" name="city" value="北京" /><span>北京</span></div> 5 <div><input type="radio" name="city" value="上海" /><span>上海</span></div> 6 <div><input type="radio" name="city" value="南京" /><span>南京</span></div> 7 <div><input type="radio" name="city" value="深圳" /><span>深圳</span></div> 8 <div><input type="radio" name="city" value="广州" /><span>广州</span></div> 9 <div><input type="radio" name="city" value="武汉" /><span>武汉</span></div> 10 </fieldset> 11 </div> 12 <div style="margin-top:20px;"> 13 <button id="btnRadio1">获取选择的radio</button> 14 <button id="btnRadio2">选择上海</button> 15 </div>
1 //获取当前选择的radio值 2 $('#btnRadio1').click(function(){ 3 var group = $('#radioGroup'), 4 value = group.find(':radio:checked').val(); 5 alert(value); 6 }); 7 8 //选择上海 9 $('#btnRadio2').click(function(){ 10 $('#radioGroup').find(':radio[value="上海"]').prop('checked', true); 11 });