Jquery 表单取值赋值的一些基本操作

下面是关于jQuery表单取值赋值的一些基本操作的完整攻略，希望对您有所帮助。

获取表单元素的值

要获取表单元素的值，可以使用 jQuery 的 val() 方法。下面是一个获取文本框的值的示例：

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

上面的代码通过选择器获取了一个类型为 text 的文本框，并使用 val() 方法获取它的值。

我们还可以使用 prop() 方法来获取单选框或复选框的选中状态，比如：

// 获取单选框的值
var value = $("input[type='radio']:checked").prop("value");

// 获取多选框的值
var values = [];
$("input[type='checkbox']:checked").each(function() {
  values.push($(this).val());
});

上面的代码分别使用了 :checked 选择器来选中被选中的单选框或复选框，然后使用 prop() 方法获取它们的值或状态。

设置表单元素的值

要设置表单元素的值，同样可以使用 jQuery 的 val() 方法。下面是一个设置文本框的值的示例：

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

上面的代码使用选择器选中了一个类型为 text 的文本框，并将它的值设置为 hello world。

同时，我们还可以使用 prop() 方法来设置单选框或复选框的选中状态：

// 设置单选框的值
$("input[type='radio'][value='1']").prop("checked", true);

// 设置多选框的值
$("input[type='checkbox'][value='1']").prop("checked", true);

上面的代码使用选择器选中了一个 value 值为 1 的单选框或多选框，并将它的选中状态设置为 true。

示例说明

1. 获取下拉列表的值并输出

<!-- HTML代码 -->
<select id="my-select">
  <option value="1">选项1</option>
  <option value="2">选项2</option>
  <option value="3">选项3</option>
</select>
<button id="btn-get-select-value">获取值</button>

// JS代码
$("#btn-get-select-value").click(function() {
  var value = $("#my-select").val();
  alert(value);
});

上面的代码为下拉列表和一个按钮，当按钮被点击时，它会获取下拉列表的选中值并通过 alert() 输出。

1. 设置单选框的值为指定选项

<!-- HTML代码 -->
<input type="radio" value="1" name="gender">男
<input type="radio" value="2" name="gender">女
<button id="btn-set-radio-value">设置为女</button>

// JS代码
$("#btn-set-radio-value").click(function() {
  $("input[type='radio'][value='2']").prop("checked", true);
});

上面的代码为两个单选框和一个按钮，当按钮被点击时，它会将选项2的单选框设置为选中状态。

以上就是关于 jQuery 表单取值赋值的一些基本操作的完整攻略，希望对您有所帮助。