使用jQuery选择复选框组的值

Question

我正在使用Zend_Form输出一组复选框:

<label style="white-space: nowrap;"><input type="checkbox" name="user_group[]" id="user_group-20" value="20">This Group</label>

使用普通的HTTP Post,这些值作为数组传递,但是当我有点难以理解如何使用jQuery获取所有值时.我想我可以选择使用组:

$("input[@name='user_group[]']").val()

但这只是抓住列表中第一个复选框的值,而不管它是否被选中.有任何想法吗？

Answer 1

您可以使用选中的选择器仅捕获所选的选择器(无需知道计数或自己迭代它们):

$("input[name='user_group[]']:checked")

使用这些选中的项目,您可以创建这些值的集合或对集合执行某些操作:

var values = new Array();
$.each($("input[name='user_group[]']:checked"), function() {
  values.push($(this).val());
  // or you can do something to the actual checked checkboxes by working directly with  'this'
  // something like $(this).hide() (only something useful, probably) :P
});

Answer 2

我不确定选择器中使用的"@".至少使用最新的jQuery,我不得不删除@以使其与两个不同的复选框数组一起运行,否则为每个数组选择所有选中的项:

var items = [];
$("input[name='items[]']:checked").each(function(){items.push($(this).val());});

var about = [];
$("input[name='about[]']:checked").each(function(){about.push($(this).val());});

现在,项目和工作.

Answer 3

使用.map()(改编自http://api.jquery.com/map/上的示例):

var values = $("input[name='user_group[]']:checked").map(function(index,domElement) {
    return $(domElement).val();
});

Answer 4

使用mapin而不是each可以避免数组创建步骤:

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

从map()文档的页面:

通过函数传递当前匹配集中的每个元素,生成包含返回值的新jQuery对象

get() 将这些值转换为数组.