Получение всех выбранных флажков в массиве

Итак, у меня есть эти флажки:

<input type="checkbox" name="type" value="4" />
<input type="checkbox" name="type" value="3" />
<input type="checkbox" name="type" value="1" />
<input type="checkbox" name="type" value="5" />

И так далее. Их около 6, и они кодируются вручную (то есть не извлекаются из базы данных), поэтому они, вероятно, останутся неизменными какое-то время.

Мой вопрос в том, как я могу получить их все в массиве (в javascript), чтобы я мог использовать их при выполнении запроса AJAX $.post с использованием Jquery.

Есть предположения?

Изменить: я бы хотел, чтобы выбранные флажки были добавлены в массив


javascript jquery ajax dhtml
person Ali    schedule 26.02.2009    source источник
comment
Возможный дубликат массива jquery с несколькими флажками   -  person Jason C    schedule 17.07.2017
comment
В то время как другой вопрос новее, а этот более популярен, другой вопрос лучше, более краткий сборник ответов (включая стратегии здесь, а также некоторые из них).   -  person Jason C    schedule 17.07.2017

Ответы (20)


arrow_upward
380
arrow_downward

Отформатировано:

$("input:checkbox[name=type]:checked").each(function(){
    yourArray.push($(this).val());
});

Надеюсь, это сработает.

person ybo    schedule 26.02.2009
comment
и что делать, если снять флажок, чтобы удалить значение из массива - person Jubin Patel; 07.06.2013
comment
@JubinPatel, вам просто нужно сбросить массив перед этим кодом. yourArray = [] - person rrk; 12.06.2015
comment
Вы также можете сразу определить свой массив, используя map вместо each: var yourArray = $("input:checkbox[name=type]:checked").map(function(){return $(this).val()}).get() - person Duvrai; 30.12.2015

arrow_upward
79
arrow_downward

Чистый JS

Для тех, кто не хочет использовать jQuery

var array = []
var checkboxes = document.querySelectorAll('input[type=checkbox]:checked')

for (var i = 0; i < checkboxes.length; i++) {
  array.push(checkboxes[i].value)
}
person Chris Underdown    schedule 02.09.2017
comment
Всегда люблю ванильный ответ JS. - person formicini; 14.05.2019
comment
да, иногда мы действительно не хотим использовать jQuery - person Ajit Bhandari; 12.07.2021

arrow_upward
40
arrow_downward

я не проверял, но должно работать

<script type="text/javascript">
var selected = new Array();

$(document).ready(function() {

  $("input:checkbox[name=type]:checked").each(function() {
       selected.push($(this).val());
  });

});

</script>
person Barbaros Alp    schedule 26.02.2009
comment
нажмите, чтобы добавить значение в массив, но что удалить при снятии отметки? - person Jubin Patel; 07.06.2013

arrow_upward
24
arrow_downward

Это должно помочь:

$('input:checked');

Я не думаю, что у вас есть другие элементы, которые можно проверить, но если вы это сделаете, вам придется сделать это более конкретным:

$('input:checkbox:checked');

$('input:checkbox').filter(':checked');
person Georg Schölly    schedule 26.02.2009

arrow_upward
22
arrow_downward

Версия ES6:

const values = Array
  .from(document.querySelectorAll('input[type="checkbox"]'))
  .filter((checkbox) => checkbox.checked)
  .map((checkbox) => checkbox.value);


function getCheckedValues() {
  return Array.from(document.querySelectorAll('input[type="checkbox"]'))
  .filter((checkbox) => checkbox.checked)
  .map((checkbox) => checkbox.value);
}

const resultEl = document.getElementById('result');

document.getElementById('showResult').addEventListener('click', () => {
  resultEl.innerHTML = getCheckedValues();
});
<input type="checkbox" name="type" value="1" />1
<input type="checkbox" name="type" value="2" />2
<input type="checkbox" name="type" value="3" />3
<input type="checkbox" name="type" value="4" />4
<input type="checkbox" name="type" value="5" />5

<br><br>
<button id="showResult">Show checked values</button>
<br><br>
<div id="result"></div>

person quotesBro    schedule 25.08.2017

arrow_upward
15
arrow_downward

Чистый JavaScript без временных переменных:

Array.from(document.querySelectorAll("input[type=checkbox][name=type]:checked")).map(e => e.value)
person Wilbert    schedule 02.10.2019
comment
самое лаконичное решение с использованием vanilla JS - person M. Mufti; 10.04.2020
comment
на самом деле должно быть ...map((i,e) => e.value))... - person spetsnaz; 30.09.2020
comment
Индекс @spetsnaz — это ВТОРОЙ элемент, поэтому, если вам нужен индекс, вам нужно сделать (e, i). Что в данном случае, конечно, не нужно. См. developer.mozilla.org/nl/docs/Web. /JavaScript/Справочник/ - person gabn88; 13.01.2021
comment
Хорошее однострочное решение. Может быть легко повторно использован в методе с входным именем в качестве параметра и оператором возврата для получения массива. - person ronline; 01.03.2021

arrow_upward
14
arrow_downward

В MooTools 1.3 (последняя на момент написания):

var array = [];
$$("input[type=checkbox]:checked").each(function(i){
    array.push( i.value );
});
person Lee Goddard    schedule 26.06.2011
comment
Не осознавал, что возраст вопроса или характер решения были актуальны. - person Lee Goddard; 31.08.2011
comment
Потому что я нашел этот вопрос, когда искал ответ на ту же проблему с помощью MooTools. - person Lee Goddard; 04.09.2012
comment
Обратите внимание, что этот ответ относится к MooTools 1.3, а не к jQuery. - person Lee Goddard; 04.12.2018

arrow_upward
13
arrow_downward

Если вы хотите использовать ванильный JS, вы можете сделать это аналогично @zahid-ullah, но избегая цикла:

  var values = [].filter.call(document.getElementsByName('fruits[]'), function(c) {
    return c.checked;
  }).map(function(c) {
    return c.value;
  });

Тот же код в ES6 выглядит намного лучше:

var values = [].filter.call(document.getElementsByName('fruits[]'), (c) => c.checked).map(c => c.value);


window.serialize = function serialize() {
  var values = [].filter.call(document.getElementsByName('fruits[]'), function(c) {
    return c.checked;
  }).map(function(c) {
    return c.value;
  });
  document.getElementById('serialized').innerText = JSON.stringify(values);
}
label {
  display: block;
}
<label>
  <input type="checkbox" name="fruits[]" value="banana">Banana
</label>
<label>
  <input type="checkbox" name="fruits[]" value="apple">Apple
</label>
<label>
  <input type="checkbox" name="fruits[]" value="peach">Peach
</label>
<label>
  <input type="checkbox" name="fruits[]" value="orange">Orange
</label>
<label>
  <input type="checkbox" name="fruits[]" value="strawberry">Strawberry
</label>
<button onclick="serialize()">Serialize
</button>
<div id="serialized">
</div>

person Terite    schedule 18.08.2016

arrow_upward
12
arrow_downward

В Javascript это будет выглядеть так (Демонстрационная ссылка):

// get selected checkboxes
function getSelectedChbox(frm) {
  var selchbox = [];// array that will store the value of selected checkboxes
  // gets all the input tags in frm, and their number
  var inpfields = frm.getElementsByTagName('input');
  var nr_inpfields = inpfields.length;
  // traverse the inpfields elements, and adds the value of selected (checked) checkbox in selchbox
  for(var i=0; i<nr_inpfields; i++) {
    if(inpfields[i].type == 'checkbox' && inpfields[i].checked == true) selchbox.push(inpfields[i].value);
  }
  return selchbox;
}
person zahid ullah    schedule 10.05.2015

arrow_upward
3
arrow_downward

При проверке добавьте значение для флажка и при снятии отметки вычтите значение

$('#myDiv').change(function() {
  var values = 0.00;
  {
    $('#myDiv :checked').each(function() {
      //if(values.indexOf($(this).val()) === -1){
      values=values+parseFloat(($(this).val()));
      // }
    });
    console.log( parseFloat(values));
  }
});
<div id="myDiv">
  <input type="checkbox" name="type" value="4.00" />
  <input type="checkbox" name="type" value="3.75" />
  <input type="checkbox" name="type" value="1.25" />
  <input type="checkbox" name="type" value="5.50" />
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>

person Joepraveen    schedule 16.11.2017
comment
Пожалуйста, добавьте немного пояснений к вашему ответу. Ответы на чистый код обычно бесполезны. - person sjaustirni; 16.11.2017

arrow_upward
3
arrow_downward

Другой способ сделать это с помощью vanilla JS в современных браузерах (без поддержки IE и, к сожалению, без поддержки iOS Safari на момент написания статьи) — это FormData.getAll():

var formdata   = new FormData(document.getElementById("myform"));
var allchecked = formdata.getAll("type"); // "type" is the input name in the question

// allchecked is ["1","3","4","5"]  -- if indeed all are checked
person foz    schedule 02.07.2019

arrow_upward
2
arrow_downward

Использовать это:

var arr = $('input:checkbox:checked').map(function () {
  return this.value;
}).get();
person MHK    schedule 11.05.2017

arrow_upward
1
arrow_downward

Использование Jquery

Вам нужно только добавить класс к каждому входу, я добавил класс «источник», вы, конечно, можете его изменить.

<input class="source" type="checkbox" name="type" value="4" />
<input class="source" type="checkbox" name="type" value="3" />
<input class="source" type="checkbox" name="type" value="1" />
<input class="source" type="checkbox" name="type" value="5" />

<script type="text/javascript">
$(document).ready(function() {
    var selected_value = []; // initialize empty array 
    $(".source:checked").each(function(){
        selected_value.push($(this).val());
    });
    console.log(selected_value); //Press F12 to see all selected values
});
</script>
person Ahmed Al Bermawy    schedule 16.03.2016

arrow_upward
1
arrow_downward

Выберите флажок по имени ввода

var category_id = [];

$.each($("input[name='yourClass[]']:checked"), function(){                    
    category_id.push($(this).val());
});
person Nazmul Haque    schedule 04.03.2021

arrow_upward
0
arrow_downward

Используйте закомментированный блок if, чтобы предотвратить добавление значений, которые уже есть в массиве, если вы используете нажатие кнопки или что-то еще для запуска вставки

$('#myDiv').change(function() {
  var values = [];
  {
    $('#myDiv :checked').each(function() {
      //if(values.indexOf($(this).val()) === -1){
      values.push($(this).val());
      // }
    });
    console.log(values);
  }
});
<div id="myDiv">
  <input type="checkbox" name="type" value="4" />
  <input type="checkbox" name="type" value="3" />
  <input type="checkbox" name="type" value="1" />
  <input type="checkbox" name="type" value="5" />
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>

person Nisal Edu    schedule 18.10.2017

arrow_upward
0
arrow_downward

Вы можете попробовать что-то вроде этого:

$('input[type="checkbox"]').change(function(){
       var checkedValue = $('input:checkbox:checked').map(function(){
                return this.value;
            }).get();         
            alert(checkedValue);   //display selected checkbox value     
 })

Здесь

$('input[type="checkbox"]').change(function() call when any checkbox checked or unchecked, after this
$('input:checkbox:checked').map(function()  looping on all checkbox,
person pappu kr Sharma    schedule 13.04.2018

arrow_upward
0
arrow_downward

вот мой код для той же проблемы, кто-то может попробовать это. Jquery

<script>
$(document).ready(function(){`
$(".check11").change(function(){
var favorite1 = [];        
$.each($("input[name='check1']:checked"), function(){                    
favorite1.push($(this).val());
document.getElementById("countch1").innerHTML=favorite1;
});
});
});
</script>
person Rahul Gupta    schedule 04.05.2018

arrow_upward
0
arrow_downward

может использовать эту функцию, которую я создал

function getCheckBoxArrayValue(nameInput){
    let valores = [];
    let checked = document.querySelectorAll('input[name="'+nameInput+'"]:checked');
    checked.forEach(input => {
        let valor = input?.defaultValue || input?.value;
        valores.push(valor);
    });
    return(valores);
}

чтобы использовать его, просто назовите его так

getCheckBoxArrayValue("type");
person Rubens Flinco    schedule 05.05.2021

arrow_upward

arrow_downward

person    schedule
comment
Насколько я понимаю код выше, он перебирает все флажки и снимает их. Как этот ответ связан с вопросом? - person Terite; 18.08.2016
comment
Это просто перебирает флажки и снимает их. Правильный ответ в VanillaJS см. в ответе Захида Уллы ниже. - person jmknoll; 31.08.2016
comment
Как это отвечает на вопрос? Это делает что-то совершенно не связанное с тем, что спрашивают. Почему так много плюсов? Я что-то упустил, или вопрос был отредактирован после того, как люди проголосовали за него? - person Shubham Chaudhary; 15.12.2019

arrow_upward

arrow_downward

person    schedule
comment
Для полезного ответа эту реакцию необходимо расширить. Объясните, почему это ответ на вопрос. - person Jeroen Heier; 07.04.2019
comment
Добро пожаловать в Stack Overflow и спасибо за ваш вклад! Было бы неплохо, если бы вы прочитали это руководство Как написать хороший ответ и соответствующим образом скорректировали свой ответ. Спасибо! - person David; 07.04.2019