在B/S系统中,大家打交道最多的就是页面中的Form表单,JQuery中对此也提供了丰富的函数,简化操作
1.启用和禁用控件
$('#billingInfo input:text').attr('disabled','disabled');
$('#billingInfo input:text').removeAttr('disabled');
2.选中radio或checkbox
$radioBtn.attr('checked',true);
3.CheckBox的全选
function check(){
$(":checkbox").attr("checked","checked");
$(this).text("UnCheck");
}
function unCheck(){
$(":checkbox").removeAttr("checked");
$(this).text("Check");
}
$("#clickMe").toggle(check,unCheck);
<a href="#" id="clickMe">Check</a>
4.Select中的option的添加和删除
实际开发中,经常会遇到将一个列表框中的项转移到另一个列表框
<fieldset id="selectGroup" class="area">
<legend>SelectGroup</legend>
<div>
<table>
<tr>
<td>
<select id="selectOne" multiple="multiple">
<option value="One">One</option>
<option value="Two">Two</option>
</select>
</td>
<td>
<a href="#" id="addOption">-></a><br>
<a href="#" id="removeOption"><-</a>
</td>
<td>
<select id="selectTwo" multiple="multiple">
<option value="Three">Three</option>
<option value="Four">Four</option>
</select>
</td>
</tr>
</table>
</div>
</fieldset>
function addOption(event){
$options = $("#selectOne option:selected");
$options.appendTo("#selectTwo");
}
function removeOption(event){
var $options = $("#selectTwo option:selected");
$options.appendTo("#selectOne");
}
$("#addOption").bind("click",addOption);
$("#removeOption").bind("click",removeOption);
5.表单验证
JQuery中提供了一个强大的插件用来验证表单控件,详见官网
6.Form的Ajax提交
其实,这个部分写到这里就没办法写了,太多的知识点,我又不想做抄书机器。还是请大家翻阅文档吧,呵呵。