Работа с Radio Button в JQuery

Сборник приемов работы с радиокнопками в JQuery. Рассмотрим на примере группы контролов с одинаковым name="radio".

<label><input type="radio" name="radio" value="1"> Radio Button 1</label>
<label><input type="radio" name="radio" value="2"> Radio Button 2</label>
<label><input type="radio" name="radio" value="3"> Radio Button 3</label>
HTML
if ($('input[name="radio"]').is(':checked')){
	alert('Включен');
} else {
	alert('Выключен');
}
JS
var value = $('input[name="radio"]:checked').val();
alert(value);
JS

Можно получить текст у отмеченного элемента, методом closest() получаем ближайшего родителя (в данном случаи <label>), далее получаем его текстовое содержание.

var text = $('input[name="radio"]:checked').closest('label').text();
alert(text);
JS
// Отметить 1-й
$('input[name="radio"][value="1"]').prop('checked', true);

// Отметить 2-й
$('input[name="radio"][value="2"]').prop('checked', true);

// Отметить 3-й
$('input[name="radio"][value="3"]').prop('checked', true);

// Снять
$('input[name="radio"]').prop('checked', false);
JS

Метод trigger() имитирует клик по radio, т.е. по мимо включения, сработают все события элемента.

$('input[name="radio"][value="1"]').trigger('click');
JS
// Заблокировать
$('#btn-block').click(function(){
	$('input[name="radio"]').prop('disabled', true);
});

// Разблокировать
$('#btn-unblock').click(function(){
	$('input[name="radio"]').prop('disabled', false);
});
JS
<p class="text-center">
	<label><input type="radio" name="radio" value="1"> Radio Button 1</label><br>
	<label><input type="radio" name="radio" value="2"> Radio Button 2</label><br>
	<label><input type="radio" name="radio" value="3"> Radio Button 3</label>
</p>

<div class="block-text" id="block-1">
	Блок текста №1
</div>

<div class="block-text" id="block-2">
	Блок текста №2
</div>

<div class="block-text" id="block-3">
	Блок текста №3
</div>
HTML
$('input[name="radio"]').click(function(){
	var target = $('#block-' + $(this).val());

	$('.block-text').not(target).hide(0);
	target.fadeIn(500);
});
JS
04.12.2019
48088
Предыдущая запись Команды PuTTY, SSH, Unix
Следующая запись Использование циклов в PHP

Комментарии 2

Алексей Мащенко Алексей Мащенко
25 января 2021 в 19:24
0
if ($('input[name="radio"]').is(':checked')){
alert('Включен');
$(this).addClass('active'); /* ПОЧЕМУ ТАК НЕ РАБОТАЕТ? */
} else {
alert('Выключен');
}
Андрей Шерешевский Андрей Шерешевский
6 марта 2021 в 01:11
0
Для вебмастеров. Публикуем ценные материалы по IT.

, чтобы добавить комментарий.

Другие публикации

Работа с checkbox в JQuery
Сборник приемов JQuery для работы с чекбоксом.
169222
+11
Селекторы JQuery
В jQuery, селекторы в основном позаимствованы из CSS 1-3, также добавлены свои, что дало хороший набор инструментов для манипуляций с элементами в документе.
6096
+9
Работа с Textarea jQuery
Сборник jQuery приемов с textarea - получить содержимое, вставить значение, подсчет количества символов и строк и т.д.
38553
+4
Работа с Input Text jQuery
Сборник приемов JQuery для работы с текстовыми полями. Во всех примерах используется следующий html код...
84753
+12
Contenteditable – текстовый редактор
Если добавить атрибут contenteditable к элементу, его содержимое становится доступно для редактирования пользователю, а...
21991
+25
Работа с select с помощью JQuery
Сборник методов JQuery для работы с выпадающими списками select option с примерами.
146913
+8