Jquery: как получить все значения элемента ввода с именами массива?

У меня есть html-код, который выглядит следующим образом:

<input type = "text" name = "fruits[apple]" value = "true">
<input type = "text" name = "fruits[orange]" value = "false">
<input type = "text" name = "fruits[mango]" value = "true">

Как выбрать все фрукты и получить их соответствующие значения? Я ищу объект, подобный

{
  "apple": true,
  "orange": false,
  "mango": true
}

Связано: stackoverflow.com/questions/33615334/…

— 30.05.2019 23:02

javascript jquery html

30.05.2019 23:00

Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией

В JavaScript одним из самых запутанных понятий является поведение ключевого слова "this" в стрелочной и обычной функциях.

Концепция локализации и ее применение в приложениях React ⚡️

Локализация - это процесс адаптации приложения к различным языкам и культурным требованиям. Это позволяет пользователям получить опыт, соответствующий...

Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer

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

Безумие обратных вызовов в javascript [JS]

Здравствуйте! Юный падаван 🚀. Присоединяйся ко мне, чтобы разобраться в одной из самых запутанных концепций, когда вы начинаете изучать мир...

Система управления парковками с использованием HTML, CSS и JavaScript

Веб-сайт по управлению парковками был создан с использованием HTML, CSS и JavaScript. Это простой сайт, ничего вычурного. Основная цель -...

JavaScript Вопросы с множественным выбором и ответы

Если вы ищете платформу, которая предоставляет вам бесплатный тест JavaScript MCQ (Multiple Choice Questions With Answers) для оценки ваших знаний,...

Перейти к ответу Данный вопрос помечен как решенный

Ответы 1

Ответ принят как подходящий

Вы можете выбрать элементы, начинающиеся с fruits[, и сопоставить их значения:

const vals = $('[name^ = "fruits["]')
  .map((_, input) => input.value)
  .get();
console.info(vals);

<script src = "https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<input type = "text" name = "fruits[apple]" value = "true">
<input type = "text" name = "fruits[orange]" value = "false">
<input type = "text" name = "fruits[mango]" value = "true">

Имейте в виду, что .value входных данных — это струны — если вместо этого вам нужны логические значения, вам придется сделать это более явно:

const vals = $('[name^ = "fruits["]')
  .map((_, input) => input.value === 'true')
  .get();
console.info(vals);

<script src = "https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<input type = "text" name = "fruits[apple]" value = "true">
<input type = "text" name = "fruits[orange]" value = "false">
<input type = "text" name = "fruits[mango]" value = "true">

Если вам также нужна уникальная часть name, то reduce в объект пар ключ-значение (и также можете удалить jQuery при использовании reduce):

const vals = [...document.querySelectorAll('[name^ = "fruits["]')]
  .reduce((a, { name, value }) => {
    const key = name.match(/[^[]+(?=\])/)[0];
    a[key] = value === 'true';
    return a;
  }, {});
console.info(vals);

<input type = "text" name = "fruits[apple]" value = "true">
<input type = "text" name = "fruits[orange]" value = "false">
<input type = "text" name = "fruits[mango]" value = "true">

Ух ты! Не могу поверить, ты очень быстрый. Мне придется подождать 12 минут, чтобы принять этот ответ. ржу не могу

— 30.05.2019 23:04

Я хочу получить их в формате пары ключ-значение. фрукты['яблоко' => правда, 'манго' => ложь]

— 30.05.2019 23:07

Вместо этого используйте reduce и можете также удалить jQuery на этом этапе.

— 30.05.2019 23:10

@Tintin Я бы спросил, если вы хотите отформатировать их с помощью таких ключей объекта, зачем создавать html с именами, которые не такие?

— 30.05.2019 23:24

30.05.2019 23:02