jquery 获取表单元素里面的值示例代码

当需要获取表单中用户输入或选择的数据时，可以使用 jQuery 的选择器和方法来获取表单元素的值。

下面是一个获取表单元素值的示例代码：

// 获取输入框中的值
var inputVal = $('input').val();

// 获取下拉框选中项的值
var selectVal = $('select').val();

// 获取单选框或复选框选中的值
var radioVal = $('input[name=radio]:checked').val();
var checkboxVal = $('input[name=checkbox]:checked').val();

上面代码中，$('input') 可以选取所有的输入框元素，而 .val() 方法可以获取输入框元素的值。类似地，$('select') 可以选取所有的下拉框元素，而 .val() 方法可以获取选中项的值。对于单选框和复选框，需要使用 :checked 选择器来选取选中的元素，再使用 .val() 方法来获取选中元素的值。

下面是两个示例说明：

示例一

假设有一个表单包含用户的姓名、年龄和性别三个字段，如下代码所示：

<form id="form">
  <label for="name">姓名：</label>
  <input type="text" name="name" id="name"><br>

  <label for="age">年龄：</label>
  <input type="number" name="age" id="age"><br>

  <label for="gender">性别：</label>
  <select name="gender" id="gender">
    <option value="male">男</option>
    <option value="female">女</option>
  </select><br>

  <button type="submit">提交</button>
</form>

要获取用户输入的姓名、年龄和性别，可以使用以下 jQuery 代码：

$('#form').submit(function(event) {
  // 获取输入框中的值
  var name = $('#name').val();
  var age = $('#age').val();

  // 获取下拉框选中项的值
  var gender = $('#gender').val();

  // 显示获取到的值
  alert('姓名：' + name + '，年龄：' + age + '，性别：' + gender);

  event.preventDefault(); // 阻止表单提交
});

上述代码中，使用 $('#name').val() 获取输入框中的值，使用 $('#age').val() 获取数字输入框中的值，使用 $('#gender').val() 获取下拉框选中项的值，最后通过 alert 方法显示获取到的值。

示例二

假设有一个表单包含多个复选框和单选框，如下代码所示：

<form id="form2">
  <label for="hobby">爱好：</label><br>
  <input type="checkbox" name="hobby" value="reading">阅读<br>
  <input type="checkbox" name="hobby" value="swimming">游泳<br>
  <input type="checkbox" name="hobby" value="shopping">购物<br>

  <label for="marriage">婚姻状态：</label><br>
  <input type="radio" name="marriage" value="married">已婚<br>
  <input type="radio" name="marriage" value="unmarried">未婚<br>

  <button type="submit">提交</button>
</form>

要获取用户选择的爱好和婚姻状态，可以使用以下 jQuery 代码：

$('#form2').submit(function(event) {
  // 获取复选框选中的值
  var hobby = $('input[name=hobby]:checked').val();

  // 获取单选框选中的值
  var marriage = $('input[name=marriage]:checked').val();

  // 显示获取到的值
  alert('爱好：' + hobby + '，婚姻状态：' + marriage);

  event.preventDefault(); // 阻止表单提交
});

上述代码中，使用 $(':checked') 选择器获取选中的元素，再使用 .val() 方法获取选中元素的值，最后通过 alert 方法显示获取到的值。