Jquery для получения массива объектов на основе значений флажка

Question

У меня есть несколько флажков в 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>

javascript html jquery

0

Code Guy 24 Янв 2022 в 14:17

Answer 1

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

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

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

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

Answer 2

Проблема с вашей логикой заключается в том, что 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

Jquery для получения массива объектов на основе значений флажка

2 ответа

Похожие вопросы

Новые вопросы

javascript