У меня есть несколько флажков в html-форме. Мне нужно получить массив объектов, когда любой из флажков в html-форме установлен или снят, то есть при внесении изменений он должен возвращать массив объектов

Я предпочитаю использовать $.map

Ожидаемое значение

[{"A": "dataA"}, {"B": "dataB"}], когда проверяются и A, и B [{"A": "dataA"}], когда проверяется только A и т. д.

Я пробовал с

<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script>
$(document).ready(function(){

$('input[type="checkbox"]').change(function() {
    
alert($.map($("input[type='checkbox']:checked"), function(i) {
  var a = []
  a[$(this).attr("name")] = $(this).attr("data-id");
  return a
}));
});
});
</script>

<input data-id="dataA" name="A" type="checkbox" />A
<input data-id="dataB" name="B" type="checkbox" />B
</head>
</html>
0
Code Guy 24 Янв 2022 в 14:17

2 ответа

Лучший ответ

Вы имеете в виду это?

Карта не соответствует тому, что вы хотите, и вы злоупотребляете массивом как объектом.

Вот массив объектов

<!DOCTYPE html>
<html>

<head>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
  <script>
    $(document).ready(function() {

      $('input[type="checkbox"]').change(function() {
        const res = []
        $("input[type='checkbox']:checked").each(function(i) {
          res.push({[$(this).attr("name")] : $(this).attr("data-id")});
        });
        console.log(res)
      });
    });
  </script>

  <input data-id="dataA" name="A" type="checkbox" />A
  <input data-id="dataB" name="B" type="checkbox" />B
</head>

</html>

А вот и объект:

<!DOCTYPE html>
<html>

<head>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
  <script>
    $(document).ready(function() {

      $('input[type="checkbox"]').change(function() {
        const res = {}
        $("input[type='checkbox']:checked").each(function(i) {
          res[$(this).attr("name")] = $(this).attr("data-id");
        });
        console.log(res)
      });
    });
  </script>

  <input data-id="dataA" name="A" type="checkbox" />A
  <input data-id="dataB" name="B" type="checkbox" />B
</head>

</html>
1
mplungjan 24 Янв 2022 в 14:25
Спасибо. Я хочу, чтобы возвращаемый тип был типом массива. Как это можно сделать?
 – 
Code Guy
24 Янв 2022 в 14:24
Посмотреть обновленный скрипт
 – 
mplungjan
24 Янв 2022 в 14:25
Это означает, что если html-форма имеет 10 флажков и 6 флажков отмечены, вывод кода должен дать массив с 6 объектами.
 – 
Code Guy
24 Янв 2022 в 14:25
Да. это то, что делает мой (теперь первый) пример
 – 
mplungjan
24 Янв 2022 в 14:26
Это потрясающе!
 – 
Code Guy
24 Янв 2022 в 14:26

Проблема с вашей логикой заключается в том, что map() возвращает массив; вам не нужно определять новый массив в обработчике итерации и возвращать его. Вам просто нужно вернуть объект, который вы хотите сгенерировать, из каждого флажка, например:

jQuery($ => {
  let $cb = $(':checkbox').on('change', () => {
    let checkedValues = $cb.filter(':checked').map((i, el) => ({ [el.name]: el.dataset.id })).get();
    console.log(checkedValues);
  });
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>

<input data-id="dataA" name="A" type="checkbox" />A
<input data-id="dataB" name="B" type="checkbox" />B
1
Rory McCrossan 24 Янв 2022 в 14:29