如何在 jQuery 中获取复选框值

jQuery 提供了很多方法来操作 HTML 元素，包括复选框。在获取复选框的值时，可以使用 val() 方法，也可以使用 prop() 方法。下面分别介绍两种方法的使用。

使用 val() 方法

val() 方法可以用来获取单选框、下拉框、输入框等表单元素的值。对于复选框，可以通过选中的个数来判断是否选中。示例代码如下：

<!-- HTML 代码 -->
<input type="checkbox" name="fruit" value="apple">苹果<br>
<input type="checkbox" name="fruit" value="orange">橘子<br>
<input type="checkbox" name="fruit" value="banana">香蕉<br>
<button id="btn">获取选中值</button>

// JavaScript 代码
$('#btn').click(function() {
  var checked = $('input[name="fruit"]:checked');
  var valArr = [];
  checked.each(function() {
    valArr.push($(this).val());
  });
  var valStr = valArr.join(',');
  alert(valStr);
});

解析：

1. 选中所有 name 为 "fruit" 的复选框元素。
2. 遍历所有选中的复选框，将其值添加到一个数组中。
3. 最后将数组元素用逗号连接成一个字符串，弹出对话框显示结果。

使用 prop() 方法

prop() 方法可以用来获取表单元素的属性，包括 "checked" 属性，用来判断复选框是否选中。示例代码如下：

<!-- HTML 代码 -->
<input type="checkbox" name="fruit" value="apple">苹果<br>
<input type="checkbox" name="fruit" value="orange">橘子<br>
<input type="checkbox" name="fruit" value="banana">香蕉<br>
<button id="btn">获取选中值</button>

// JavaScript 代码
$('#btn').click(function() {
  var checked = $('input[name="fruit"]').filter(':checked');
  var valArr = [];
  checked.each(function() {
    valArr.push($(this).val());
  });
  var valStr = valArr.join(',');
  alert(valStr);
});

解析：

1. 选中所有 name 为 "fruit" 的复选框元素。
2. 过滤出选中的复选框元素。
3. 遍历所有选中的复选框，将其值添加到一个数组中。
4. 最后将数组元素用逗号连接成一个字符串，弹出对话框显示结果。

总结

以上两种方法都可以用来获取复选框的值，具体使用哪一种取决于项目需求。在实际开发中，可以根据具体情况选择适当的方法。