Сборник приемов работы с радиокнопками в 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>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);// Отметить 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);Метод 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);
});<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);
});
Алексей Мащенко
Андрей Шерешевский
