javascript - 使用 jQuery 获取选中的复选框值的列表

Question

我有以下 HTML：

<input type="checkbox" name="subregion[]" value="North East" />North East
<input type="checkbox" name="subregion[]" value="North West" />North West
<input type="checkbox" name="subregion[]" value="Midlands" />Midlands
<input type="checkbox" name="subregion[]" value="South East" />South East
<input type="checkbox" name="subregion[]" value="South West" />South West
<input type="checkbox" name="subregion[]" value="Wales" />Wales
<input type="checkbox" name="subregion[]" value="Scotland" />Scotland

我想通过检查输入的值列表传递给使用 ajax 的 php 脚本。我只是不知道如何用 jQuery 来实现它？

Answer 1

要获取值数组：

var checked = $('[name="subregion[]"]:checked').map(function() { 
  return $(this).val(); 
}).get(); 

如果您使用$.ajax或相关方法，则不必序列化或调用JSON.stringify（您可以将数组用作参数值）。

Answer 2

循环通过选中的复选框，将它们添加到数组并将其转换为字符串：

var checked = [];   
$('input[type="checkbox"]:checked').each(function() {
    checked.push($(this).val());
});
var checkedStr = JSON.stringify(checked);    

或者像这样序列化它们：

$('input[type="checkbox"]:checked').serialize();

Answer 3

演示：jsFiddle

如果你使用 CSS3，你可以使用begins-with选择器，否则你可以使用name="subregion[]".

function getSelectedSubregions() {
    var subregion = new Array();
    $(':checkbox:checked[name^="subregion"]').each(function() {
       subregion.push($(this).val());
    });
    return subregion;
}