Работа с Radio Button в JQuery

04.12.2019

84071

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

04.12.2019

84071

#HTML #jQuery #Формы

12 3

Предыдущая запись Команды SSH

Следующая запись Использование циклов в PHP

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

Алексей Мащенко

25 января 2021 в 19:24

if ($('input[name="radio"]').is(':checked')){
	alert('Включен'); 
	$(this).addClass('active'); /* ПОЧЕМУ ТАК НЕ РАБОТАЕТ? */
} else {
	alert('Выключен');
}

Ответить

Даниил Панов

22 марта 2023 в 02:29

Потому что this у тебя неоткуда взяться. this только в контексте функции-замыкания (когда пишешь безымянную функцию), а здесь у тебя простое условие. напиши

if ($('input[name="radio"]').is(':checked')) {
alert('Включен');
$('input[name="radio"]:checked').addClass('active');
} else {alert('Выключен');}

Можно и без условий, но тогда не будут выводиться alert:

$('input[name="radio"]:checked').addClass('active');

Эта строчка поставит активный класс только выбранным radio, но выбранным может быть только 1

Ответить

Андрей Шерешевский

6 марта 2021 в 01:11

Для вебмастеров. Публикуем ценные материалы по IT.

Ответить

Александр Максимов

7 февраля 2022 в 12:19

спасибо, уже очень давно пользуюсь вашими учебниками, лучшие в своем роде)

Ответить

Егор Негрей

16 июня 2022 в 10:58

Здравствуйте! Отличные уроки, спасибо)))
Подскажите пожалуйста, как в шестом примере "Показать контент по отмеченному Radio" сделать вывод не одного блока с текстом а например двух в разных местах? Например сами инпуты лежат где ни будь посередине страницы, а при выборе одного из них должен появится контент вверху страницы и снизу, одновременно в двух местах. Пытался сделать вот так, но не выходит почему то:


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

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

<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>
</p>


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

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


<style>
  .block-text {
	display: none;
	padding: 15px;
	border: 3px solid #ec4848;
}

.block-text2 {
	display: none;
	padding: 15px;
	border: 3px solid #ec4848;
}
</style>
<script src="https://snipp.ru/cdn/jquery/2.1.1/jquery.min.js"></script>
<script>
  $('input[name="radio"]').click(function(){
      var target = $('#block-' + $(this).val());

      $('.block-text').not(target).hide(0);
      target.fadeIn(500);

  });
  
  $('input[name="radio"]').click(function(){
	var target = $('#block-' + $(this).val());

	$('.block-text2').not(target).hide(0);
	target.fadeIn(500);
   
});
</script>

Ответить

Тропа путника

11 августа 2023 в 13:26

Здравствуйте. Подскажите, в 6 пункте при нажатии на радио кнопку происходит замена div, как-то можно сделать чтобы он просто открывал div, например нажал я на кнопку 1 и кнопку 2, и у меня открылись div1 и div2, чтобы они не прятались, а оставались после нажатия на кнопку.

Ответить

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