Управление Select, Checkbox и Radiobox с помощью jQuery

В этой статье я собрал для себя и для посетителей основные задачи, которые приходится часто выполнять с элементами select, checkbox и radiobox на странице, чтобы не искать их в интернете. Здесь можно узнать как с помощью jQuery получить значение выбранного элемента, как выбрать элемент, добавить или удалить.

Работа с Checkbox и Radiobox на jQuery

Проверить состояние checkbox и radiobox

if ($('#checkbox').is(':checked')) {
  alert('Включен');
} else {
  alert('Выключен');
}

// Другой вариант
if ($('#checkbox').prop('checked')) {
  alert('Включен');
} else {
  alert('Выключен');
}

Отметить и снять checkbox или radiobox (поменять состояние "выбрано")

// Отметить checkbox
$('#checkbox').prop('checked', true);
// Отметить radiobox
$('#radiobox').prop('checked', true);

// Снять checkbox
$('#checkbox').prop('checked', false);
// Снять radiobox
$('#radiobox').prop('checked', false);

Перебрать все отмеченные (выбранные) checkbox и radiobox на странице

// Перебрать все отмеченные checkbox
$("input[type='checkbox']:checked").each(function(){
  // что-то делаем
});
$("input[type='radio']:checked").each(function(){
  // что-то делаем
});

// Сокращенный вариант
$("input:checkbox:checked").each(function(){
  // что-то делаем
});
$("input:radio:checked").each(function(){
  // что-то делаем
});

Работа с Select на jQuery

Предположим, у нас есть такой выпадающий список select:

<select id="my_select" name="my_select">
<option value="1">Первое значение</option>
<option value="2">Второе значение</option>
<option value="3">Третье значение</option>
</select>

С этим списком можно сделать множество различных действий. Я разгруппировал их по общему смыслу.

Получить option в select

Получить значение выбранного элемента select

$("#select option:selected").val();
// сокращенно
$("#select :selected").val();
// или просто
$("#select").val();

Получить текст выбранного элемента select

$("#select :selected").html();
// или
$("#select :selected").text();

Выбор элемента option в select

Сделать выбранным первый option

$("#select :first").prop("selected", true);

Сделать выбранным второй option

$("#select :nth-child(2)").prop("selected", true);

Сделать выбранным option, у которого значение равно 2

$("#select option[value='2']").prop("selected", true);
// сокращенно
$("#select [value='2']").selected = true;

Сделать выбранным option, содержащий текст 'значение'

$("#select :contains('значение')").prop("selected", true);
// или
$("#select").find("option:contains('значение')").prop("selected", true);
// или только первое вхождение:
$("#select :contains('значение')").first().prop("selected", true);
// или
$("#select").find("option:contains('значение')").first().prop("selected", true);

Сделать все option в списке select выбранными

$('#select option:selected').each(function(){
  this.selected = true;
});

Проверить, выбран ли option в списке select

if ($("#select").val())

Добавление option в select

Добавить option в начало списка select

$("#select").prepend( $('<option value="0">тест</option>'));

Добавить option в конец списка select

$("#select").append( $('<option value="5">тест</option>'));

Добавить новый option после второго

$("#select option:nth-child(2)").after($('<option value="22">двадцать два</option>'));

Удаление option в select

Удалить первый option

$("#select :first").remove();

Удалить последний option

$("#select :last").remove();

Удалить option, у которого значение равно 2

$("#select option[value='2']").remove();
сокращенно:
$("#select [value='2']").remove();

Очистить весь select (удалить все option)

$("#select").empty();
// или
$('option', $("#select")).remove();

Блокировка / разблокировка select

Сделать select недоступным

$("#select").prop("disabled", true);
// или
$("#select").disabled = true;

Разблокировать select (сделать доступным)

$("#select").prop("disabled", false);
// или
$("#select").disabled = false;

Заблокировать выборочные option в select

Сделать недоступным option, у которого значение равно 3

$("#select option[value='3']").prop("disabled", true);

Сделать недоступными все option у которых value больше 10

$('#select option').filter(function() {
  return this.value > 10;
}).prop("disabled", true);

Перебрать все option списка select

$('#select option').each(function(){
  // какие-то действия с option
});

Узнать количество элементов option в списке select

$("#select option").size();

Надеюсь, собранные здесь решения пригодятся не только мне, но и другим программистам. Постарался найти и написать примеры всех возможных задач. Если есть пожелания/предложения добавить что-то еще, напишите пожалуйста в комментариях ниже.