8.6　jQuery操作表单

学习目标

熟悉jQuery操作文本框、单选按钮等。

表单交互操作本身就是网页设计开发中使用最多的地方，而使用jQuery更能让这种交互人性化，给访问用户非常好的交互体验。而且jQuery完成这些效果都提供了专门的函数方法，代码实现非常简单，而效果又让人非常震撼，的确是Web开发人员的良师益友。

8.6.1　操作文本框（text）

jQuery操作文本框主要是获取文本框value的值，以及如何改变文本框的value值。

1．获取文本框value值

jQuery代码：$("#text_id").attr("value")或者$("#text_id").val()。

2．改变文本框value值

jQuery代码：$("#text_id").attr("value"，"text_value")。

8.6.2　操作单选按钮（radio）

比如有如下一组单选按钮：

<input id="city1" name="city" type="radio" value="1" />
<label for="city1">北京</label>
<input id="city2" name="city" type="radio" value="2" checked="checked" />
<label for="city2">上海</label>
<input id="city3" name="city" type="radio" value="3" />
<label for="city3">广州</label>
<input id="city4" name="city" type="radio" value="4" />
<label for="city4">深圳</label>
<br />
<input type="button" id="confirm" name="confirm" value="确认" />

1．获取单选按钮中选中项的value和text

var value = $("input:radio[name='city']:checked").val();
var text = $("input:radio[name='city']:checked").next().text();

2．设置单选按钮中第4个项目为选择项

$("input:radio[name='city']").get(3).checked = true;

完整代码可以参见Operator_Radio.aspx。

8.6.3　操作复选框（checkbox）

例如，有如下一组复选框：

<input id="city1" name="city" type="checkbox" value="1" />
<label for="city1">北京</label>
<input id="city2" name="city" type="checkbox" value="2" checked="checked" />
<label for="city2">上海</label>
<input id="city3" name="city" type="checkbox" value="3" />
<label for="city3">广州</label>
<input id="city4" name="city" type="checkbox" value="4" />
<label for="city4">深圳</label>
<br />
<input type="button" id="confirm" name="confirm" value="确认" />
<input type="button" id="choice" name="choice" value="全选" />
<input type="button" id="cancel" name="cancel" value="取消" />

1．获取复选框中选中项的value和text

$(document).ready(function () {
  $("#confirm").click(function () {
    var value = "";
    var text = "";
    $("input:checkbox[name=’city’]:checked").each(function () {
       value = value + $(this).val() + ",";
       text = text + $(this).next().text() + ",";
    });
       alert(value + ":" + text);
    });
  });

2．设置复选框中第4个项目也为选择项

$("input:checkbox[name='city']").get(3).checked = true;

3．设置复选框全选代码

//全选
  $("#choice").click(function () {
    $("input:checkbox[name='city']").each(function (index) {
       //方式1
       //$("input:checkbox[name='city']").get(index).checked = true;
       //方式2
       $(this).attr("checked", "checked");

    });
  });

4．设置复选框取消全选代码

//取消
  $("#cancel").click(function () {
    $("input:checkbox[name='city']").each(function (index) {
       //方式1
       //$("input:checkbox[name='city']").get(index).checked = false;
       //方式2
       $(this).removeAttr("checked");
    });
  });

完整代码可以参见Operator_Checkbox.aspx。

8.6.4　操作下拉列表（select）

比如有如下一组下拉列表：

<select id="city" name="city">
<option value="1">北京</option>
<option value="2">上海</option>
<option value="3">广州</option>
<option value="4">深圳</option>
</select>
<br /><br />
<input type="button" id="confirm" name="confirm"
value="确认" />

1．获取下拉列表中选中项的value和text

var value = $("#city option[selected]").val();
var text = $("#city option[selected]").text();

2．设置下拉列表中第4个项目为选择项

$("#city")[0].selectedIndex = 3;

完整代码可以参见Operator_Select.aspx。