jQuery对表单处理的三个实例

我花了整整一个星期时间，更新了公司网站的购物结帐系统。主要增加的功能是允许用户在多个Billing Address(或者Shipping Address)进行选择和编辑，所有这些功能都是在同一个页面完成。我运用了jQuery代码进行ajax调用和表单处理。在这篇文章里我准备介绍三个jQuery对表单元素处理的实际运用，和我在jQuery基础里提到的 - 处理表单元素相比，这些运用要相对灵活一点。

1. 清空表单元素

使用传统Javascript提供的reset()方法可以把表单所有元素重设为初始值(或者默认值)，但是有时reset()并非你要的，比如说，表单的初始值使用的是预设值(非空)，或者你只是想清空特定表单元素，这时候使用reset()就行不通了。

HTML表单代码

<form>
  First name: <input type="text" name="firstname" value="Adam"> <br />
  Last name: <input type="text" name="lastname" value="Cai"> <br />
  Accoutn ID: <input type="text" name="acc_id" value ="123">
</form>

使用以下jQuery代码，可以清空所有类型为'text'的input表单控件，但是除了name为'acc_id'的input；并且把name=acc_id的输入框设置为0

$("input[type='text']").each(function(){
  if (this.name != 'acc_id') $(this).val("");
  else $(this).val("0");
});

2. 下拉框的选择/清除选择

HTML下拉框代码：

<form action="">
  <select name="cars">
    <option value="0">前选择车的牌子</option>
    <option value="volvo">沃尔沃</option>
    <option value="honda">本田</option>
    <option value="toyota">丰田</option>
    <option value="audi">奥迪</option>
  </select>
</form>

如果每个选项(option)都没有属性'selected'，那么第一选项将被选中。使用下面的jQuery代码，可以先选中本田，接下来，如果要选择丰田，可以先清除选择，然后使用同样的方法进行再选。

$("select[name='cars'] option[value='toyota']").attr("selected","selected"); 
//接下来，如果要选择丰田，可以先清除选择，然后使用同样的方法进行选择
$("select[name='cars'] :selected").removeAttr("selected");
$("select[name='cars'] option[value='honda']").attr("selected","selected"); 

另外我们还可以使用传统的Javascript选择方法：selectedIndex，要注意：下拉框的选项索引(index)是从0开始，因此在上述表单里，selectedIndex=2 - 代表本田车被选中。具体写法如下：

document.form[0].cars.selectedIndex = 2; //选择本田车
//这里用form[0]，代表页面的第一个form，如果FORM有特定的名字，那么可以使用form的名字代替
//例如 form的名为：myCar，
document.myCar.cars.selectedIndex = 0; //恢复默认值

3.选择单选框(radio)和复选框(checkbox）

不论是单选框还是复选框，我们都可以使用checked的属性，设置值为true代表选择；设置值为false代表反选择。

HTML代码：

<input type="checkbox" name="fruit" value ="apple">苹果<br>
<input type="checkbox" name="fruit" value ="orange">桔子<br>
<input type="checkbox" name="fruit" value ="mango">芒果<br>

使用下面的jQuery代码，可以把桔子选中。

$("input[type='checkbox']").each(function(){
  if ($(this).val() == 'orange')
  $(this).attr('checked', true);
});