jQuery получает значения отмеченных флажков в массив

129

Я пытаюсь получить значения всех флажков, которые в настоящее время отмечены, и сохранить их в массиве. Вот мой код:

 $("#merge_button").click(function(event){
    event.preventDefault();
    var searchIDs = $("#find-table input:checkbox:checked").map(function(){
      return $(this).val();
    });
    console.log(searchIDs);
  });

Однако это дает больше, чем мне нужно. Я получаю не только значения, но и другие вещи, которые мне не нужны.

[«51729b62c9f2673e4c000004», «517299e7c9f26782a7000003», «51729975c9f267f3b5000002», prevObject: jQuery.fn.jQuery.init [3], context: document, jquery constructor:…

Мне нужны только ID (в данном случае первые 3 элемента).

Используя $.eachи помещая значения в массив, я получаю желаемый результат:

$("#find-table input:checkbox:checked").each(function(){ myArray.push($(this).val()); })

["51729b62c9f2673e4c000004", "517299e7c9f26782a7000003", "51729975c9f267f3b5000002"]

Однако я бы хотел использовать $.map, так как это экономит мне строку кода и красивее.

Спасибо

если __name__ равно None
источник

Ответы:

262

Вызовите .get()в самом конце, чтобы превратить полученный объект jQuery в настоящий массив.

$("#merge_button").click(function(event){
    event.preventDefault();
    var searchIDs = $("#find-table input:checkbox:checked").map(function(){
      return $(this).val();
    }).get(); // <----
    console.log(searchIDs);
});

Согласно документации :

Поскольку возвращаемое значение представляет собой объект jQuery, который содержит массив, очень часто вызывает .get () для результата для работы с базовым массивом.

Эндрю Уитакер
источник
1
Я ожидал истинного массива от $.map. Спасибо за решение, работает.
если __name__ равно None
Спасибо большое, мне нужно это для мамы Ticketcenter
Стивен
2
Я не понимаю, зачем .get()нужен, когда функция возвращает .val()из каждого элемента в коллекции jQuery. Это потому, что mapон превращает его обратно в объект jQuery перед его передачей searchIDs?
iconoclast
Можем ли мы получить значение как тип массива?
krutssss 06
22

ДЕМО: http://jsfiddle.net/PBhHK/

$(document).ready(function(){

    var searchIDs = $('input:checked').map(function(){

      return $(this).val();

    });
    console.log(searchIDs.get());

});

Просто вызовите get (), и у вас будет массив, как написано в спецификациях: http://api.jquery.com/map/

$(':checkbox').map(function() {
      return this.id;
    }).get().join();
Кристи Пуфу
источник
18

Вам нужно добавить .toArray()в конец вашей .map()функции

$("#merge_button").click(function(event){
    event.preventDefault();
    var searchIDs = $("#find-table input:checkbox:checked").map(function(){
        return $(this).val();
    }).toArray();
    console.log(searchIDs);
});

Демо: http://jsfiddle.net/sZQtL/

tymeJV
источник
10

Я немного отредактировал ваш код и считаю, что пришел с решением, которое вы искали. В основном вместо того, searchIDsчтобы быть результатом, .map()я просто помещал значения в массив.

$("#merge_button").click(function(event){
  event.preventDefault();

  var searchIDs = [];

  $("#find-table input:checkbox:checked").map(function(){
    searchIDs.push($(this).val());
  });

  console.log(searchIDs);
});

Я создал скрипку с запущенным кодом.

Марк Мейер
источник
5
     var ids = [];

$('input[id="find-table"]:checked').each(function() {
   ids.push(this.value); 
});

Это сработало для меня!

Талинда Бандара
источник
1

Необходимо, чтобы элементы формы, названные в HTML как массив, были массивом в объекте javascript, как если бы форма была фактически отправлена.

Если есть форма с несколькими флажками, например:

<input name='breath[0]' type='checkbox' value='presence0'/>
<input name='breath[1]' type='checkbox' value='presence1'/>
<input name='breath[2]' type='checkbox' value='presence2'/>
<input name='serenity'  type='text' value='Is within the breath.'/>
...

В результате получился объект с:

data = {
   'breath':['presence0','presence1','presence2'],
   'serenity':'Is within the breath.'
}


var $form = $(this),
    data  = {};

$form.find("input").map(function()
{
    var $el  = $(this),
        name = $el.attr("name");

    if (/radio|checkbox/i.test($el.attr('type')) && !$el.prop('checked'))return;

    if(name.indexOf('[') > -1)
    {
        var name_ar = name.split(']').join('').split('['),
            name    = name_ar[0],
            index   = name_ar[1];

        data[name]  = data[name] || [];
        data[name][index] = $el.val();
    }
    else data[name] = $el.val();
});

И здесь есть множество ответов, которые помогли улучшить мой код, но они были либо слишком сложными, либо не совсем того, что я хотел: Преобразование данных формы в объект JavaScript с помощью jQuery

Работает, но может быть улучшено: работает только с одномерными массивами, и результирующие индексы не могут быть последовательными. Свойство length массива возвращает следующий номер индекса как длину массива, а не фактическую длину.

Надеюсь, это помогло. Намасте!

i_a
источник
1
var idsArr = [];

$('#tableID').find('input[type=checkbox]:checked').each(function() {
    idsArr .push(this.value);
});

console.log(idsArr);
Каммар Фероз
источник
0

Не используйте "каждый". Он используется для операций и изменений одного и того же элемента. Используйте «map» для извлечения данных из тела элемента и использования их в другом месте.

Митраджйоти Кусари
источник
В документации jQuery есть отличные примеры практически для всего, в том числеmap
jinglesthula
0

здесь позволяет - это класс флажков на страницах, а var позволяет собирать их в массив, и вы можете проверить значение true в цикле for, а затем выполнить желаемую операцию индивидуально. Здесь я установил индивидуальную действительность. Думаю, это решит вашу проблему.

  $(".allows").click(function(){
   var allows = document.getElementsByClassName('allows');
   var chkd   = 0;  
   for(var i=0;i<allows.length;i++)
   {
       if(allows[i].checked===true)
       {
           chkd = 1;
       }else
       {

       }
   }

   if(chkd===0)
   {
       $(".allows").prop("required",true);
       for(var i=0;i<allows.length;i++)
        {
        allows[i].setCustomValidity("Please select atleast one option");
        }

   }else
   {
       $(".allows").prop("required",false);
       for(var i=0;i<allows.length;i++)
        {
        allows[i].setCustomValidity("");
        }
   }

}); 
Manish
источник