使用 jQuery 选择复选框组的值

IT技术 javascript jquery
2021-01-15 15:50:34

我正在使用 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()

但这只是获取列表中第一个复选框的值,无论它是否被选中。有任何想法吗?

6个回答

您可以使用选中的选择器仅获取选定的选择器(不需要知道计数或自己遍历它们):

$("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
});
@ 不需要 $.each($("input[@name='user_group[]']:checked"), function() {
2021-03-18 15:50:34
那是我的错别字。使用 v1.3 或更新版本的任何人都不应使用属性选择器 [带有“@”]。
2021-03-25 15:50:34
不能[name='user_group[]']被称为属性选择器。我还在 1.4.2 中使用它。现在有更好的选择吗?
2021-03-26 15:50:34
@Ismail,它已针对 1.3 后的 jQuery 进行了更新。发布答案后发布了 1.3 版(发布于 2009 年 1 月 6 日,发布于 2009 年 1 月 14 日的 1.3)。任何使用 v1.3 或更新版本的人都不应使用属性选择器。
2021-04-12 15:50:34

我不确定选择器中使用的“@”。至少在最新的 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());});

现在,项目和工作。

我相信 @ 已在 jQuery 1.3 +1 中删除
2021-03-16 15:50:34
如果您需要获取所有复选框的值,即使它们未被选中,这也适用。例如,我需要创建一个包含所有复选框值(选中或未选中)的数组(哈希),只需删除该:checked部分
2021-03-30 15:50:34

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

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

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

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

map()文档页面:

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

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

如果可能的话会给你+100 ;)
2021-04-04 15:50:34

mhata dzenyu mese。它实际上

var selectedGroups  = new Array();
$(".user_group[checked]").each(function() {
    selectedGroups.push($(this).val());
});