JavaScript jQuery 对 Form 元素的常见操作详解

本篇攻略将详细讲解如何使用 JavaScript jQuery 操作 HTML Form 元素，包括选择器、文本框、复选框、单选框、下拉框、提交按钮等相关操作。

选择器

使用 jQuery 选择器可以轻松选择一个或多个表单元素，例如：

// 选择所有文本框
$("input[type='text']")

// 选择所有复选框
$("input[type='checkbox']")

// 选择所有单选框
$("input[type='radio']")

// 选择所有下拉框
$("select")

文本框操作

可以通过 jQuery 操作文本框的值、状态等信息，例如：

获取文本框的值

// 获取文本框的值
$("input[type='text']").val();

设置文本框的值

// 设置文本框的值
$("input[type='text']").val("new value");

禁用/启用文本框

// 禁用某个文本框
$("input[type='text']").prop("disabled", true);

// 启用某个文本框
$("input[type='text']").prop("disabled", false);

复选框操作

可以通过 jQuery 操作复选框的值、状态等信息，例如：

获取复选框的值

// 获取复选框的值
$("input[type='checkbox']").val();

设置复选框的状态

// 设置复选框选中
$("input[type='checkbox']").prop("checked", true);

// 设置复选框不选中
$("input[type='checkbox']").prop("checked", false);

禁用/启用复选框

// 禁用某个复选框
$("input[type='checkbox']").prop("disabled", true);

// 启用某个复选框
$("input[type='checkbox']").prop("disabled", false);

单选框操作

可以通过 jQuery 操作单选框的值、状态等信息，例如：

获取单选框的值

// 获取单选框的值
$("input[type='radio']").val();

设置单选框的状态

// 设置某个单选框选中
$("input[type='radio']").prop("checked", true);

// 设置某个单选框不选中
$("input[type='radio']").prop("checked", false);

禁用/启用单选框

// 禁用某个单选框
$("input[type='radio']").prop("disabled", true);

// 启用某个单选框
$("input[type='radio']").prop("disabled", false);

下拉框操作

可以通过 jQuery 操作下拉框的值、状态等信息，例如：

获取下拉框的值

// 获取下拉框的值
$("select").val();

设置下拉框的值

// 设置下拉框的值（通过选项的value）
$("select").val("value1");

// 设置下拉框的值（通过选项的文本）
$("select option:contains('option2')").prop("selected", true);

提交表单

可以通过 jQuery 提交表单，例如：

提交表单

// 提交表单
$("form").submit();

阻止表单提交

// 阻止表单提交
$("form").submit(function(event) {
  event.preventDefault();
});

示例说明

示例 1：实时显示文本框的值

HTML 代码：

<div>
  <p>文本框的值为：<span id="textValue"></span></p>
  <input type="text">
</div>

JavaScript 代码：

$("input[type='text']").on("input", function() {
  var textValue = $(this).val();
  $("#textValue").text(textValue);
});

示例 2：全选/取消全选复选框

HTML 代码：

<label><input type="checkbox" id="checkAll"> 全选</label>
<label><input type="checkbox" class="checkbox"> 选项1</label>
<label><input type="checkbox" class="checkbox"> 选项2</label>
<label><input type="checkbox" class="checkbox"> 选项3</label>

JavaScript 代码：

// 全选/取消全选复选框
$("#checkAll").on("click", function() {
  var isChecked = $(this).prop("checked");
  $(".checkbox").prop("checked", isChecked);
});

以上是 JavaScript jQuery 对 Form 元素的常见操作的详细攻略。