blocks|key|1657232|text|您可以使用选中的选择器仅获取选定的值(无需知道计数或自己遍历所有值)：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|1657233|$("input[name='user_group[]']:checked")|code-block|syntax|javascript|1657234|有了这些选中的项，您可以创建这些值的集合，或者对该集合执行某些操作：|1657235|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
});|1657236|entityMap^0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|M|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|N|8|@]|9|@]|A|$E|F]]|$1|G|3|H|5|6|7|O|8|@]|9|@]|A|$]]|$1|I|3|J|5|D|7|P|8|@]|9|@]|A|$E|F]]|$1|K|3|-4|5|6|7|Q|8|@]|9|@]|A|$]]]|L|$]]

<p>You could use the checked selector to grab only the selected ones (negating the need to know the count or to iterate over them all yourself):</p>

<pre><code>$("input[name='user_group[]']:checked")
</code></pre>

<p>With those checked items, you can either create a collection of those values or do something to the collection:</p>

<pre><code>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
});
</code></pre>


blocks|key|1442622|text|我不确定选择器中使用的"@“。至少在最新的jQuery中，我必须删除@才能使其与两个不同的复选框数组一起工作，否则将为每个数组选择所有选中的项：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|1442623|var+items+=+[];
$("input[name='items[]']:checked").each(function(){items.push($(this).val());});

var+about+=+[];
$("input[name='about[]']:checked").each(function(){about.push($(this).val());});|code-block|syntax|javascript|1442624|现在两者，项目和关于工作。|1442625|entityMap^0|0|0|0^^$0|@$1|2|3|4|5|6|7|K|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|L|8|@]|9|@]|A|$E|F]]|$1|G|3|H|5|6|7|M|8|@]|9|@]|A|$]]|$1|I|3|-4|5|6|7|N|8|@]|9|@]|A|$]]]|J|$]]

<p>I'm not sure about the "@" used in the selector.  At least with the latest jQuery, I had to remove the @ to get this to function with two different checkbox arrays, otherwise all checked items were selected for each array:</p>

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

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

<p>Now both, items and about work.</p>


blocks|key|1442634|text|使用.map()+(改编自http://api.jquery.com/map/的示例)：|type|unstyled|depth|inlineStyleRanges|offset|length|style|CODE|entityRanges|data|1442635|var+values+=+$("input[name='user_group[]']:checked").map(function(index,domElement)+{
++++return+$(domElement).val();
});|code-block|syntax|javascript|1442636|entityMap|0|LINK|mutability|MUTABLE|url|http://api.jquery.com/map/^0|2|6|D|Q|0|0|0^^$0|@$1|2|3|4|5|6|7|S|8|@$9|T|A|U|B|C]]|D|@$9|V|A|W|1|X]]|E|$]]|$1|F|3|G|5|H|7|Y|8|@]|D|@]|E|$I|J]]|$1|K|3|-4|5|6|7|Z|8|@]|D|@]|E|$]]]|L|$M|$5|N|O|P|E|$Q|R]]]]

<p>Use <code>.map()</code> (adapted from the example at <a href="http://api.jquery.com/map/">http://api.jquery.com/map/</a>):</p>

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


blocks|key|1442614|text|这是我的工作。它实际上是|type|unstyled|depth|inlineStyleRanges|entityRanges|data|1442615|var+selectedGroups++=+new+Array();
$(".user_group[checked]").each(function()+{
++++selectedGroups.push($(this).val());
});|code-block|syntax|javascript|1442616|entityMap^0|0|0^^$0|@$1|2|3|4|5|6|7|I|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|J|8|@]|9|@]|A|$E|F]]|$1|G|3|-4|5|6|7|K|8|@]|9|@]|A|$]]]|H|$]]

<p>mhata dzenyu mese. its actually </p>

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


blocks|key|1442594|text|我只是把我选择的答案缩短了一点：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|1442595|var+selectedGroups++=+new+Array();
$("input[@name='user_group[]']:checked").each(function()+{
++++selectedGroups.push($(this).val());
});|code-block|syntax|javascript|1442596|它的效果就像一个护身符，谢谢！|1442597|entityMap^0|0|0|0^^$0|@$1|2|3|4|5|6|7|K|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|L|8|@]|9|@]|A|$E|F]]|$1|G|3|H|5|6|7|M|8|@]|9|@]|A|$]]|$1|I|3|-4|5|6|7|N|8|@]|9|@]|A|$]]]|J|$]]

<p>I just shortened the answer I selected a bit:</p>

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

<p>and it works like a charm, thanks!</p>


blocks|key|1657255|text|我不是100%25完全确定你想要如何“抓住”这些值。但是如果你想遍历这些复选框，你可以像这样使用.each：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|1657256|("input[@name='user_group[]']").each(+function()+{
++++alert($(this).val());
});|code-block|syntax|javascript|1657257|当然，还有一个更好的选择器：|1657258|$(':checkbox')|1657259|entityMap^0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|M|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|N|8|@]|9|@]|A|$E|F]]|$1|G|3|H|5|6|7|O|8|@]|9|@]|A|$]]|$1|I|3|J|5|D|7|P|8|@]|9|@]|A|$E|F]]|$1|K|3|-4|5|6|7|Q|8|@]|9|@]|A|$]]]|L|$]]

<p>I'm not 100% entirely sure how you want to "grab" the values.  But if you want to iterate over the checkboxes you can use .each like so:</p>

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

<p>Of course a better selector is available:</p>

<pre><code>$(':checkbox')
</code></pre>


blocks|key|1442651|text|var+values+=+$("input[name='user_group']:checked").map(function(){
++++++return+$(this).val();
++++}).get();|type|code-block|depth|inlineStyleRanges|entityRanges|data|syntax|javascript|1442652|这将为您提供在数组中装箱的选中对象的所有值。|unstyled|1442653|entityMap^0|0|0^^$0|@$1|2|3|4|5|6|7|I|8|@]|9|@]|A|$B|C]]|$1|D|3|E|5|F|7|J|8|@]|9|@]|A|$]]|$1|G|3|-4|5|F|7|K|8|@]|9|@]|A|$]]]|H|$]]

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

<p>This will give you all the values of the checked boxed in an array.</p>


blocks|key|1442480|text|你可以有一个javascript变量来存储发出的复选框的数量，即在页面的<head>中：|type|unstyled|depth|inlineStyleRanges|offset|length|style|CODE|entityRanges|data|1442481|<script+type="text/javascript">
var+num_cboxes=<?php+echo+$number_of_checkboxes;?>;
</script>|code-block|syntax|javascript|1442482|因此，如果有10个复选框，从user_group-1到user_group-10，在javascript代码中，您将通过以下方式获取它们的值：|1442483|var+values=new+Array();
for+(x=1;+x<=num_cboxes;+x%2B%2B)
{
+++values[x]=$("#user_group-"+%2B+x).val();
}|1442484|entityMap^0|10|6|0|0|E|C|R|D|0|0^^$0|@$1|2|3|4|5|6|7|Q|8|@$9|R|A|S|B|C]]|D|@]|E|$]]|$1|F|3|G|5|H|7|T|8|@]|D|@]|E|$I|J]]|$1|K|3|L|5|6|7|U|8|@$9|V|A|W|B|C]|$9|X|A|Y|B|C]]|D|@]|E|$]]|$1|M|3|N|5|H|7|Z|8|@]|D|@]|E|$I|J]]|$1|O|3|-4|5|6|7|10|8|@]|D|@]|E|$]]]|P|$]]

<p>You can have a javascript variable which stores the number of checkboxes that are emitted, i.e in the <code>&lt;head&gt;</code> of the page:</p>

<pre><code>&lt;script type="text/javascript"&gt;
var num_cboxes=&lt;?php echo $number_of_checkboxes;?&gt;;
&lt;/script&gt;
</code></pre>

<p>So if there are 10 checkboxes, starting from <code>user_group-1</code> to <code>user_group-10</code>, in the javascript code you would get their value in this way:</p>

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


blocks|key|1442669|text|​|type|unstyled|depth|inlineStyleRanges|entityRanges|data|1442670|$(document).ready(function(){
++++		$('#btnskillgroup').click(function(){
++++++++++++++getCheckedGroups('skills');
++++++++++++});
++	$('#btncitiesgroup').click(function(){
++++++++++++++getCheckedGroups('cities');
++++++++++++});
+++++++++var+getCheckedGroups+=+function(groupname){
+++++++++++++++var+result+=+$('input[name="'%2Bgroupname%2B'"]:checked');
++++++++++++++if+(result.length+>+0)+{
++++++++++++++	var+resultstring+=+result.length+%2B"checkboxes+checked+<br>";
++++++++++++++	result.each(function(){
++++++++++++++		resultstring+%2B=+$(this).val()%2B"+<br>";+//append+value+to+exsiting+var
++++++++++++++	});
++++			$('#div'%2Bgroupname).html(resultstring);
++++		}else{
++++			$('#div'%2Bgroupname).html("+No+checkbox++is+Checked");
++++		}
+++++++++
+++++++++};
++++	});|code-block|syntax|javascript|1442671|<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>|1442672|1442673|entityMap^0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|L|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|M|8|@]|9|@]|A|$E|F]]|$1|G|3|H|5|D|7|N|8|@]|9|@]|A|$E|F]]|$1|I|3|4|5|6|7|O|8|@]|9|@]|A|$]]|$1|J|3|-4|5|6|7|P|8|@]|9|@]|A|$]]]|K|$]]

<p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
<div class="snippet-code">
<pre class="snippet-code-js lang-js prettyprint-override"><code>$(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 &gt; 0) {
              	var resultstring = result.length +"checkboxes checked &lt;br&gt;";
              	result.each(function(){
              		resultstring += $(this).val()+" &lt;br&gt;"; //append value to exsiting var
              	});
    			$('#div'+groupname).html(resultstring);
    		}else{
    			$('#div'+groupname).html(" No checkbox  is Checked");
    		}
         
         };
    	});</code></pre>
<pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"&gt;&lt;/script&gt;
Skills:&lt;input type="checkbox" name="skill"  value="Java"&gt; Java
    &lt;input type="checkbox" name="skill" value="Jquery"&gt; Jquery
    &lt;input type="checkbox" name="skill" value="PHP"&gt; PHP
&lt;br&gt;
&lt;input type="checkbox" name="cities"  value="Pune"&gt; Pune
    &lt;input type="checkbox" name="cities" value="Baramati"&gt; Baramati
    &lt;input type="checkbox" name="cities" value="London"&gt; London

    &lt;input type="submit" id="btnskillgroup" value="Get Checked Skill group"&gt;
&lt;input type="submit" id="btncitiesgroup" value="Get cities checked group"&gt;
    &lt;div id="divskills"&gt;&lt;/div&gt;
&lt;div id="divcities"&gt;&lt;/div&gt;</code></pre>
</div>
</div>
</p>


<p>I'm using Zend_Form to output a set group of checkboxes:</p>

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

<p>With a normal HTTP Post these values are passed as an array, but when I'm somewhat stumped on how to grab all the values using jQuery. I figured I can select the group using:</p>

<pre><code>$("input[@name='user_group[]']").val()
</code></pre>

<p>but that just grabs the value of the first checkbox in the list regardless of if it is checked of not. Any ideas?</p>


Select values of checkbox group with jQuery

jQuery

Java

我使用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获取所有值感到困惑时。

问使用jQuery选择复选框组的值
EN

回答 9

Stack Overflow用户

Stack Overflow用户

Stack Overflow用户

社区

活动

资源

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问使用jQuery选择复选框组的值EN

回答 9

Stack Overflow用户

Stack Overflow用户

Stack Overflow用户

社区

活动

资源

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问使用jQuery选择复选框组的值
EN