Работа с Radio Button в JQuery

04.12.2019

14053

Сборник приемов работы с радиокнопками в 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('Выключен');
}

Получить значение отмеченного

var value = $('input[name="radio"]:checked').val();
alert(value);

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

var text = $('input[name="radio"]:checked').closest('label').text();
alert(text);

Отметить и снять radio button

// Отметить 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);

Программный клик по radio

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

$('input[name="radio"][value="1"]').trigger('click');

Заблокировать и разблокировать

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

// Разблокировать
$('#btn-unblock').click(function(){
	$('input[name="radio"]').prop('disabled', false);
});

Показать контент по отмеченному Radio

<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);
});