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

Метод 1: селектор запроса с :not(:checkbox)
Пример кода:

const nonCheckboxInputs = document.querySelectorAll('input:not(:checkbox)');

Объяснение:
Этот метод использует функцию querySelectorAllс псевдоклассом :not(:checkbox)для выбора всех элементов ввода, которые не являются флажками.

Метод 2: метод фильтрации с атрибутом типа ввода
Пример кода:

const allInputs = document.getElementsByTagName('input');
const nonCheckboxInputs = Array.from(allInputs).filter(input => input.type !== 'checkbox');

Объяснение:
Здесь мы извлекаем все элементы ввода, используя getElementsByTagName('input'), а затем отфильтровываем флажки на основе их атрибута type.

Метод 3: подход jQuery
Пример кода:

const nonCheckboxInputs = $('input:not(:checkbox)');

Объяснение:
Если вы используете jQuery, вы можете использовать тот же селектор :not(:checkbox)для прямого выбора всех входных данных без флажков.

Метод 4. Метод фильтрации массива JavaScript с использованием classList
Пример кода:

const inputElements = Array.from(document.querySelectorAll('input'));
const nonCheckboxInputs = inputElements.filter(input => !input.classList.contains('checkbox'));

Объяснение:
В этом методе мы выбираем все элементы ввода, а затем отфильтровываем флажки на основе наличия определенного класса, например «флажок».

Метод 5: метод фильтрации массива JavaScript с пользовательским атрибутом данных
Пример кода:

const inputElements = Array.from(document.querySelectorAll('input'));
const nonCheckboxInputs = inputElements.filter(input => !input.getAttribute('data-checkbox'));

Объяснение:
Здесь мы используем настраиваемый атрибут данных, например data-checkbox, для установки флажков, а затем отфильтровываем входные данные без этого атрибута.

Метод 6: метод фильтрации массива JavaScript с определенным родительским контейнером
Пример кода:

const parentContainer = document.getElementById('form-container');
const nonCheckboxInputs = Array.from(parentContainer.querySelectorAll('input')).filter(input => input.type !== 'checkbox');

Объяснение:
Если ваши входные данные содержатся в определенном родительском контейнере, вы можете настроить таргетинг только на эти входные данные, сначала выбрав родительский контейнер, а затем применив фильтр.

Метод 7: метод фильтрации массива JavaScript с селектором классов
Пример кода:

const nonCheckboxInputs = Array.from(document.querySelectorAll('.input:not(.checkbox)'));

Объяснение:
В этом методе мы используем селектор классов для выбора определенных элементов ввода, а затем отфильтровываем флажки на основе наличия другого класса, например «флажок».

Используя методы, описанные в этой статье, вы можете легко идентифицировать и выбирать входные данные без флажков в HTML-формах. Независимо от того, предпочитаете ли вы собственный JavaScript или jQuery, эти примеры кода помогут вам более эффективно манипулировать входными данными без флажков и работать с ними.