jQuery获取输入提交的值 - Javascript

在Web应用中，获取用户输入的值是非常常见的操作。jQuery是一个基于Javascript的开源库，它可以使Javascript的编写更为简单、效率更高。在这篇文章中，我们将介绍如何使用jQuery获取用户输入并进行提交操作。

获取文本框的值

要获取文本框的值，我们可以使用jQuery的val()方法。该方法适用于<input type="text">、<input type="password">、<textarea>和<select>等表单元素。

比如我们有一个输入框：

<input type="text" id="inputBox">

我们可以使用以下代码获取该输入框中的值：

var inputValue = $('#inputBox').val();

其中，$('#inputBox')用于获取输入框元素，.val()用于获取该元素的值。inputValue变量即为获取的输入值。

获取单选框或复选框的值

要获取单选框或复选框的值，我们可以使用jQuery的:checked选择器，该选择器只选择被选中的元素。

比如我们有一个单选框：

<input type="radio" name="radioBox" value="1">1
<input type="radio" name="radioBox" value="2">2

我们可以使用以下代码获取该单选框的值：

var radioValue = $('input[name="radioBox"]:checked').val();

其中，$('input[name="radioBox"]:checked')用于获取单选框元素中被选中的元素，.val()用于获取该元素的值。radioValue变量即为获取的单选框值。

同理，对于复选框，我们也可以使用类似的方法来获取其值。例如：

<input type="checkbox" name="checkboxBox" value="1">1
<input type="checkbox" name="checkboxBox" value="2">2
<input type="checkbox" name="checkboxBox" value="3">3

var checkboxValue = $('input[name="checkboxBox"]:checked').map(function(){
  return $(this).val();
}).get().join(',');

其中，map(function(){return $(this).val()})用于将选择器获取到的元素转化为值数组，.get()用于获取该值数组，.join(',')用于将数组转化为以逗号分隔的字符串。checkboxValue变量即为获取的复选框值。

获取表单数据

要获取整个表单中的数据，我们可以使用jQuery的serialize()方法。该方法用于将表单元素的值序列化为一个字符串。

比如我们有一个表单：

<form id="myForm">
  <input type="text" name="username">
  <input type="password" name="password">
  <input type="radio" name="gender" value="male">Male
  <input type="radio" name="gender" value="female">Female
  <input type="checkbox" name="hobby" value="swimming">Swimming
  <input type="checkbox" name="hobby" value="reading">Reading
  <input type="submit" value="Submit">
</form>

我们可以使用以下代码获取该表单中的数据并进行提交操作：

$('#myForm').submit(function(event){
  event.preventDefault(); // 阻止表单默认提交行为
  var formData = $(this).serialize();
  console.log(formData); // 输出表单数据
  // 在此处执行提交操作
});

其中，$('#myForm')用于获取表单元素，.submit(function(event){...})用于给表单元素添加提交事件，event.preventDefault()用于阻止表单默认提交行为。$(this).serialize()用于获取表单数据并序列化为一个字符串。formData变量即为获取的表单数据。

以上即为使用jQuery获取输入提交的值的方法。在实际应用中，我们可以将获取到的值进行进一步处理或提交操作。