Как получить значение checkbox js
Перейти к содержимому

Как получить значение checkbox js

  • автор:

JS получить значение чекбокса

В данном уроке мы рассмотрим способы, с помощью которых можно получить значение чекбокса через JavaScript. Пусть у нас есть следующий чекбокс:

Получим ссылку на этот чекбокс с помощью метода querySelector :

let checkbox = document.querySelector(‘input[type=»checkbox»]’);

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

Вариант 1

Получим и выведем значение чекбокса (содержимое атрибута value ):

let value = checkbox.value; console.log(value); // выведет 1

Вариант 2

Получим и выведем состояние чекбокса (отмечен или нет):

JS/Jquery как считать значение с checkbox?

Есть несколько чекбоксов, по одному на каждую запись из БД.

Т.к. они создаются полностью одинаковыми(за исключением checked или нет), то как можно считать значение конкретного чекбокса(именно на который я кликнул) и записать в переменную?

  • Вопрос задан более трёх лет назад
  • 192 просмотра

Комментировать
Решения вопроса 1
Evgeniy @Evdokim001
PHP & WordPress developer

У checkbox есть атрибуты name и value. Каждому checkbox задайте атрибуты с уникальным значением. После этого считывайте значение атрибута.

jQuery Checkbox Checked. Работа с чекбоксами в JS

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

Другой пример — условный вывод некоторых элементов формы если выбраны какие-либо определенные опции.

Подобные задачи с легкостью решаются при помощи jQuery и нескольких строчек кода.

Как проверить чекбокс при помощи jQuery (jquery checkbox checked)

Проверить выбран ли чекбокс можно несколькими способами.

Первый и самый очевидный — проверка атрибута checked у чекбокса. Это можно сделать либо на чистом js, обратившись свойству checked

if(this.checked)

либо при помощи jQuery метода prop() , который возвращает значение атрибута, переданного в качестве аргумента. У атрибута checked может быть только два значения: true или false . Поэтому если $(‘input’).prop(‘checked’) возвращает true — считаем, что чекбокс выбран.

  

Другой способ — проверка так называемого псевдокласса :checked , который добавляется отмеченным чекбоксам. Проверить наличие псевдокласса можно при помощи jQuery метода is()

  

Псевдоклассы в CSS и jQuery — очень интересная и полезная вещь, которая заслуживает отдельной статьи. Обязательно расскажу о них поподробнее в ближайшем будущем.

Как выбрать чекбокс (checkbox check)

Предположим вам нужно отметить все чекбоксы если отмечен чекбокс «Выбрать все»

Данный функционал можно с легкостью реализовать при помощи описанного выше метода jQuery prop() с параметром checked .

$('input').prop('checked', true); // Чекбокс выбран $('input').prop('checked', false); // Чекбокс не выбран

Однако теперь мы передаем ему второй параметр — значение атрибута checked для чекбокса, в зависимости от того, отмечен ли чекбокс «Выбрать все».

   

Как получить значение чекбокса (checkbox value)

Чтобы получить значение чекбокса, как и другого любого элемента форм ( :input ), можно воспользоваться jQuery функцией val() .

var chekbox_value = $('input[name="checkbox"]').val();

При этом не важно, отмечен чекбокс или нет. Если же нужно, например, получить значения только выбранных чекбоксов, их можно отфильтровать при помощи псевдокласса :checked

Манипулировать чекбоксами при помощи jQuery на самом деле очень просто. Надеюсь, вы смогли в этом убедиться. Ну а если остались какие-то вопросы, буду рад на них ответить в комментариях.

как получить value всех выбранных checkbox javascript?

Как получить значение всех выбранных checkbox через JavaScript?

Отслеживать

14k 13 13 золотых знаков 38 38 серебряных знаков 63 63 бронзовых знака

задан 7 апр 2017 в 13:16

Ruslan Liashenka Ruslan Liashenka

541 3 3 золотых знака 9 9 серебряных знаков 26 26 бронзовых знаков

2 ответа 2

Сортировка: Сброс на вариант по умолчанию

Всё просто, с помощью JavaScript к примеру, берем все чекбоксы по классу getElementsByClassName и смотрим в цикле, кто выбран

function getCheckedCheckBoxes() < var checkboxes = document.getElementsByClassName('checkbox'); var checkboxesChecked = []; // можно в массиве их хранить, если нужно использовать for (var index = 0; index < checkboxes.length; index++) < if (checkboxes[index].checked) < checkboxesChecked.push(checkboxes[index].value); // положим в массив выбранный alert(checkboxes[index].value); // делайте что нужно - это для наглядности >> return checkboxesChecked; // для использования в нужном месте >
    

Помимо getElementsByClassName можно использовать getElementsByName или getElementsByTagName . В общем, реализаций можно написать много.

Добавить комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *