Работа с 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
1
if ($('input[name="radio"]').is(':checked')){
	alert('Включен');
} else {
	alert('Выключен');
}
JS
2
var value = $('input[name="radio"]:checked').val();
alert(value);
JS

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

var text = $('input[name="radio"]:checked').closest('label').text();
alert(text);
JS
3
// Отметить 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
4

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

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

// Разблокировать
$('#btn-unblock').click(function(){
	$('input[name="radio"]').prop('disabled', false);
});
JS
6
<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
81554
Предыдущая запись Команды 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, чтобы они не прятались, а оставались после нажатия на кнопку.

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

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

Работа с checkbox в JQuery
Сборник приемов JQuery для работы с чекбоксом.
257491
+21
Селекторы JQuery
В jQuery, селекторы в основном позаимствованы из CSS 1-3, также добавлены свои, что дало хороший набор инструментов для манипуляций с элементами в документе.
16185
+12
Работа с Textarea jQuery
Сборник jQuery приемов с textarea - получить содержимое, вставить значение, подсчет количества символов и строк и т.д.
54499
+3
Работа с Input Text jQuery
Сборник приемов JQuery для работы с текстовыми полями. Во всех примерах используется следующий html код...
130720
+15
Contenteditable – текстовый редактор
Если добавить атрибут contenteditable к элементу, его содержимое становится доступно для редактирования пользователю, а...
45415
+34
Работа с select с помощью JQuery
Сборник методов JQuery для работы с выпадающими списками select option с примерами.
252464
+15