Выберите значения группы флажков с помощью jQuery

Я использую 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()

но это просто захватывает значение первого флажка в списке, независимо от того, проверено ли оно. Любые идеи?

Ответы

Ответ 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
});

Ответ 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());});

Теперь как элементы, так и работа.

Ответ 3

Используйте .map() (адаптированный из примера в http://api.jquery.com/map/):

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

Ответ 4

С map вместо each можно избежать шага создания массива:

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

На странице map() документов:

Передайте каждый элемент в текущем согласованном наборе через функцию, создавая новый объект jQuery, содержащий возвращаемые значения

get() превращает эти значения в массив.

Ответ 5

mhata dzenyu mese. его фактически

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

Ответ 6

Я просто сократил ответ, который я выбрал немного:

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

и он работает как шарм, спасибо!

Ответ 7

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

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

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

$(':checkbox')

Ответ 8

У вас может быть переменная 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();
}

Ответ 9

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

Это даст вам все значения отмеченного в коробке в массиве.

Ответ 10

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