Выберите значения группы флажков с помощью 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-публикации эти значения передаются в виде массива, но когда я несколько озадачен тем, как получить все значения с помощью 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

мхата дзеню месе. это на самом деле

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

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

Это даст вам все значения отмеченных в штучной упаковке в массиве.

Answer 8

Я не на 100% уверен, как вы хотите "захватить" значения. Но если вы хотите перебрать флажки, вы можете использовать .each так:

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

Конечно, лучший селектор доступен:

$(':checkbox')

Answer 9

$(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");
    		}
         
         };
    	});

<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>

Answer 10

У вас может быть переменная javascript, которая хранит количество отправленных флажков, т. Е. В <head> страницы:

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

Поэтому, если в коде javascript есть 10 флажков, начиная с user_group-1 до user_group-10, вы получите их значение следующим образом:

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