一、通过val()方法获取选中值
val()方法是jquery用于获取表单元素的方法之一,其可以获取单选框、多选框和输入框的值。
// HTML示例
<form>
<input type="checkbox" name="option" value="apple"> 苹果<br>
<input type="checkbox" name="option" value="banana"> 香蕉<br>
<input type="checkbox" name="option" value="orange"> 橙子
</form>
// jQuery示例
$('input[name="option"]:checked').each(function() {
console.log($(this).val());
});
上述代码使用了选择器选取了所有被选中的多选框,然后使用each()方法遍历它们,再利用val()方法获取每个多选框选中的值。
二、使用serializeArray()方法获取选中值
serializeArray()方法可以将一个或多个表单元素的值序列化成一个数组,这个数组可以轻松地被提交到服务器以便进行进一步的处理。
// HTML示例
<form>
<input type="checkbox" name="option" value="apple"> 苹果<br>
<input type="checkbox" name="option" value="banana"> 香蕉<br>
<input type="checkbox" name="option" value="orange"> 橙子
</form>
// jQuery示例
console.log($('form').serializeArray());
上述代码使用了选择器选取了整个表单,然后使用serializeArray()方法序列化了这个表单并打印出了结果。
三、使用map()方法获取选中值
map()方法可以遍历一个数组,并将其中的每个元素转换成一个新的元素。
// HTML示例
<form>
<input type="checkbox" name="option" value="apple"> 苹果<br>
<input type="checkbox" name="option" value="banana"> 香蕉<br>
<input type="checkbox" name="option" value="orange"> 橙子
</form>
// jQuery示例
var selectedOptions = $('input[name="option"]:checked').map(function() {
return $(this).val();
}).get();
console.log(selectedOptions);
上述代码使用了选择器选取了所有被选中的多选框,然后使用map()方法遍历它们,再利用val()方法获取每个多选框选中的值,最终使用get()方法把结果转换成一个数组并打印出来。
四、使用each()方法获取选中值
each()方法可以遍历一个数组或对象,并执行一个回调函数。
// HTML示例
<form>
<input type="checkbox" name="option" value="apple"> 苹果<br>
<input type="checkbox" name="option" value="banana"> 香蕉<br>
<input type="checkbox" name="option" value="orange"> 橙子
</form>
// jQuery示例
var selectedOptions = [];
$('input[name="option"]:checked').each(function() {
selectedOptions.push($(this).val());
});
console.log(selectedOptions);
上述代码使用选择器选取了所有被选中的多选框,然后使用each()方法遍历它们,再利用val()方法获取每个多选框选中的值并存储到selectedOptions数组中,最终打印出来。
五、使用prop()方法获取选中值
prop()方法可以用于获取元素的属性,例如选中状态。
// HTML示例
<form>
<input type="checkbox" name="option" value="apple"> 苹果<br>
<input type="checkbox" name="option" value="banana"> 香蕉<br>
<input type="checkbox" name="option" value="orange"> 橙子
</form>
// jQuery示例
var selectedOptions = [];
$('input[name="option"]').each(function() {
if ($(this).prop('checked')) {
selectedOptions.push($(this).val());
}
});
console.log(selectedOptions);
上述代码使用了选择器选取了所有的多选框,然后使用each()方法遍历它们,再利用prop()方法获取每个多选框的checked属性来判断是否选中,选中则将其值存储到selectedOptions数组中,最终打印出来。
总结
以上就是通过多种方法获取jquery多选框选择的值的方法,使用这些方法可以让我们更加方便地处理表单数据。需要注意的是,在使用map()方法或each()方法获取多选框的选中值时,要注意判断选中状态。