как разбить массив на значения JQuery?

305
13 сентября 2017, 13:13

Как разбить массив на части? есть код который сохраняет данные с чекбокс:

<script>
        function showValues() {
        var fields = $("input[type=checkbox][name=check]:checked").serializeArray();
        $("#results").empty();
        jQuery.each(fields, function(i, field){
        $("#results").append(field.value + ", ");
        });
        }
        $(":checkbox").click(showValues);
        $("select").change(showValues);
        showValues();
        </script>

Нужно получить каждое значение по отдельности так как потом нужно будет получить данные из базы данных в зависимости от выбраных чекбоксов.

Answer 1

JQuery

  1. JQuery - это библиотека JS, которая, по своей сути, не расширяет возможностей JS, всё что делает это библиотека - синтаксический сахар, не более. Решение выборки DOM элементов тривиально для Pure JS (pure js, есть ничто иное, как чистый javascript, из коробки, то есть, совсем не требует подключать ничего стороннего).

Для наглядности, предлагаю заглянуть сюда, достаточно доступно ответил James Allardice:

var inputs = document.getElementsByTagName("input");
for(var i = 0; i < inputs.length; i++) {
    if(inputs[i].type == "checkbox") {
        inputs[i].checked = true; 
    }  
}

Атрибуты name и id

  1. Обращаю внимание на атрибуты, такие как id и name. Покажу на примере:
    <input type="checkbox" name="hasName">Имя</input>
    <input type="checkbox" name="hasAge">Возраст</input>
    <input type="checkbox" name="hasPhone">Телефон</input>
    <input type="checkbox" name="hasAddress">Адрес</input>

Рекомендуется их грамотно использовать. Созданы эти атрибуты для идентификации поля ввода, и удобного нахождения такого компонента. Зная что у "Имя", компонент имеет атрибут name="hasName", мы сможем его найти, вот ещё примеры:

Document.prototype.getInputByName = function(name) { // Пишем небольшое расширение для Document объекта
    var result = null;
    var inputs = document.getElementsByTagName("input");
    if(inputs=null || inputs.length==0){
        return null;
    }
    inputs.forEach(function(input){
        if(result!=null){
            return;
        }
        if(input.getAttribute("name")===name){
            result = input;
        }
    });
    return result;
}
var hasNameCheckBox = document.getInputByName("hasName");

Теперь мы без труда сможем получать input элементы по name. Ещё более простой способ - getElementById, он уже реализован, и вы сможете сразу его использовать, предварительно, добавив идентификаторы в свои поля ввода.

Коллекции

  1. Зная конкретные CheckBox-ы (либо, собирая их с body иными способами, возможно даже, без каких либо критериев выбора), мы сможем составить "карту" (он же Map), по которой с лёгкостью получим доступ к нужному полю. Map - это высокоуровневая коллекция, и имеет мало общего с массивами. Ключевой особенностью этой коллекции является то, что данные хранятся парами - ключ-значение. Зная ключ, можно быстро получить значение.

В нашем случае, ключём будет имя поля, значением - DOM элемент поля:

Document.prototype.getNamedInputElements = function() {
    var result = new Map(); // создаём пустую карту
    var inputs = document.getElementsByTagName("input"); // находим все поля на странице (здесь рекомендую реализовать свой критерий поиска)
    if(inputs=null || inputs.length==0){
        return null;
    }
    inputs.forEach(function(input){
        result.set(input.getAttribute("name"),input); // добавляем в коллекцию поле, в качестве ключа используем его имя
    });
    return result;
}
var inputs = document.getNamedInputElements(); // получаем все поля
inputs.get("hasName").checked = true; // меняем значение поля hasName

Таким образом, вы сможете построить карту ваших полей, и в любой момент обращаться к любому из них. Аналогично, вы сможете навесить ваших слушателей:

var inputs = document.getNamedInputElements();
inputs.forEach(function(input){
    input.onclick=showValues; // вешаем слушателя
});

Но, тут я не знаю что это у вас и для чего оно, так что, к ответу это вряд ли относится...

READ ALSO
Преобразование массива PHP в JS

Преобразование массива PHP в JS

Всем доброго времени сутокПодскажите пожалуйста столкнулся с такой задачей, есть плагин графиков на js в нем есть такие массивы с данными:

312
Jquerry, отловить количество символов

Jquerry, отловить количество символов

Коллеги, как вывести сообщение alert как только наберётся 3 символа ? Я так понимаю keyup функцияСпасибо

220
Как получить значение атрибута js?

Как получить значение атрибута js?

Пытаюсь подключить ползунокЗначение, которое нужно получить находится в атрибуте aria-valuetext

520