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

21.10.2020 14:09

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

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

conditional_input.gif

Подобные задачи с легкостью решаются при помощи 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 на самом деле очень просто. Надеюсь, вы смогли в этом убедиться. Ну а если остались какие-то вопросы, буду рад на них ответить в комментариях.

Комментарии

Оставьте свой комментарий

© 2024 SITEROST

Ничего не найдено