Как найти выбранный checkbox

HTML CSS JS

Checkbox Checked — Проверка Состояния Чекбокса ✔️

Дата размещения статьи 22/12/2019 👁48083

В этом посте мы обсудим, как получить значения отмеченных флажков в JavaScript и jQuery.

В чистом JavaScript вы можете использовать checked свойство, чтобы получить проверенное состояние флажка. Следующий код демонстрирует это с помощью getElementsByName() метод.

Изменить в JSFiddle

 
В качестве альтернативы вы можете использовать querySelectorAll() метод с :checked селектор.

Изменить в JSFiddle

 
Приведенный выше код вернет все отмеченные флажки в документе. Чтобы выбрать единственную группу флажков с определенным именем, вы можете сделать следующее:

Изменить в JSFiddle

2. Использование jQuery

С jQuery вы можете использовать селектор атрибутов, например:

Изменить в JSFiddle

 
Чтобы объединить значения отмеченных флажков в виде одной строки, разделенной разделителем, вы можете сделать следующее:

Изменить в JSFiddle

Это все, что касается получения значений отмеченных флажков в JavaScript и jQuery.

Спасибо за чтение.

Пожалуйста, используйте наш онлайн-компилятор размещать код в комментариях, используя C, C++, Java, Python, JavaScript, C#, PHP и многие другие популярные языки программирования.

Как мы? Порекомендуйте нас своим друзьям и помогите нам расти. Удачного кодирования

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

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

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

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

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

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

if(this.checked){ ... }

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

<script>
  jQuery(document).ready(function($){
    
    $('input[type="checkbox"]').on('change', function(){
      
      // Это короткая запись, которая означает то же, что и if($(this).prop('checked') == true)
      if($(this).prop('checked'))
        alert('Чекбокс выбран');
    });
    
  });
</script>

<input type="checkbox" name="checkbox" />

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


<script>
  jQuery(document).ready(function($){
    $('input[name="trigger"]').on('change', function($){
      
      if($(this).is(':checked'))
        $('input[name="target"]').show();
      
      else
        $('input[name="target"]').hide();
    });
  });
</script>


<form>
  <input type="checkbox" name="trigger" />
  <input type="text" name="target" style="display:none" />
</form>

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

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

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

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

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

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

<script>
  jQuery(document).ready(function($){
    $('input[name="select-all"]').on('change', function(){
      if($(this).is(':checked')){
        $('.checkboxes').find('input[type="checkbox"]')
          .prop('checked', true); // Устанавливаем значение свойства checked
      } else {
        $('.checkboxes').find('input[type="checkbox"]')
          .prop('checked', false);
    });
  });
</script>

<input type="checkbox" name="select-all" />

<div class="checkboxes">
  <input type="checkbox" name="checkboxes[]" value="1"/>
  <input type="checkbox" name="checkboxes[]" value="2"/>
  
  <input type="checkbox" name="checkboxes[]" value="n"/>
</div>

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

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

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

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

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