Сборник приемов работы с радиокнопками в 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>
Проверить состояние
Получить значение отмеченного
Можно получить текст у отмеченного элемента, методом closest()
получаем ближайшего родителя (в данном случаи <label>
), далее получаем его текстовое содержание.
Программный клик по radio
Метод trigger()
имитирует клик по radio, т.е. по мимо включения, сработают все события элемента.
Заблокировать и разблокировать
// Заблокировать
$('#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>
$('input[name="radio"]').click(function(){
var target = $('#block-' + $(this).val());
$('.block-text').not(target).hide(0);
target.fadeIn(500);
});