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

使用map代替each，可以避免数组创建步骤：

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

从文档的map()页面：

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

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

Answer 5

mhata dzenyu mese。它实际上是

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

Answer 6

我刚刚缩短了我选择的答案：

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

它就像一个魅力，谢谢！

Answer 7

我不是100％完全确定你想要“抓住”价值观。但是如果你想迭代复选框，你可以使用.each，如下所示：

("input[@name='user_group[]']").each( function() {
    alert($(this).val());
});

当然有更好的选择器可用：

$(':checkbox')

Answer 8

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

这将为您提供数组中复选框的所有值。

Answer 9

你可以有一个javascript变量来存储发出的复选框的数量，即在页面的<head>中：

<script type="text/javascript">
var num_cboxes=<?php echo $number_of_checkboxes;?>;
</script>

因此，如果有10个复选框，从user_group-1到user_group-10，则在javascript代码中您将以这种方式获得其值：

var values=new Array();
for (x=1; x<=num_cboxes; x++)
{
   values[x]=$("#user_group-" + x).val();
}

Answer 10

＆＃13;

$(document).ready(function(){
    		$('#btnskillgroup').click(function(){
              getCheckedGroups('skills');
            });
  	$('#btncitiesgroup').click(function(){
              getCheckedGroups('cities');
            });
         var getCheckedGroups = function(groupname){
               var result = $('input[name="'+groupname+'"]:checked');
              if (result.length > 0) {
              	var resultstring = result.length +"checkboxes checked <br>";
              	result.each(function(){
              		resultstring += $(this).val()+" <br>"; //append value to exsiting var
              	});
    			$('#div'+groupname).html(resultstring);
    		}else{
    			$('#div'+groupname).html(" No checkbox  is Checked");
    		}
         
         };
    	});

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
Skills:<input type="checkbox" name="skill"  value="Java"> Java
    <input type="checkbox" name="skill" value="Jquery"> Jquery
    <input type="checkbox" name="skill" value="PHP"> PHP
<br>
<input type="checkbox" name="cities"  value="Pune"> Pune
    <input type="checkbox" name="cities" value="Baramati"> Baramati
    <input type="checkbox" name="cities" value="London"> London

    <input type="submit" id="btnskillgroup" value="Get Checked Skill group">
<input type="submit" id="btncitiesgroup" value="Get cities checked group">
    <div id="divskills"></div>
<div id="divcities"></div>

＆＃13;

使用jQuery选择复选框组的值

10 个答案: