Как проверить радиокнопку с помощью JavaScript или jQuery

1. Проверьте радиокнопку с помощью JavaScript
2. Проверьте переключатель с помощью jQuery
3. Проверьте радиокнопку, основанную на нажатии кнопки

Мы часто используем клиентские скрипты, такие как jQuery или JavaScript, для создания интерактивных и быстро выполняемых веб-сайтов и можем эффективно выполнять простые операции, такие как проверка формы, без дополнительного посещения веб-сервера.

Учитывая сценарий, в котором мы хотим, чтобы радиокнопка была выбрана по умолчанию или при нажатии на кнопку, мы можем использовать JavaScript или jQuery.

Давайте начнем с определения формы.

    <div id='radiobuttonset'>
        <input type='radio' id='myradio_1' name='radiobutton' value='1' />1
        <input type='radio' id='myradio_2' name='radiobutton' value='2' />2
        <input type='radio' id='myradio_3' name='radiobutton' value='3' />3 
    </div>

Проверьте радиокнопку с помощью JavaScript

Выберите радиокнопку с помощью ID

Один из лучших возможных способов предварительного выбора радиокнопки - это обращение к ней по ее идентификатору. Чтобы выбрать элемент DOM по ID, мы добавляем к ID префикс # и устанавливаем проверяемое значение как true.

document.querySelector('#myradio_1').checked = true;

Выход: Выбрана радио кнопка 1.

Выберите радиокнопку, используя значение

Альтернативным вариантом является использование значения радиокнопки для предварительного выбора. Выбор по значению может быть полезен в сценариях, где мы не знаем ID радиокнопки, но знаем ее значение.

Мы можем использовать ID родительского div и выбрать элемент, значение которого равно 2. Затем мы можем установить проверяемый атрибут в true.

document.querySelector('#radiobuttonset > [value="2"]').checked = true;	

Выход: Радио кнопка 2 выбрана.

В некоторых случаях, когда мы знаем, что в DOM нет других элементов, равных предопределенному значению, мы можем выбрать элемент, просто проверив значение. В этом случае нам не понадобится родительский ID.

document.querySelector('[value="3"]').checked = true;

Выход: Выбрана радио кнопка 3.

Проверьте переключатель с помощью jQuery

Помимо использования JavaScript, мы также можем использовать библиотеку jQuery для проверки радиокнопок, основанных на предопределенном значении. jQuery - это библиотека, построенная с использованием JavaScript. Она помогает упростить обход и манипуляции с HTML DOM. Синтаксис jQuery также проще, чем JavaScript.

Чтобы добавить использование jQuery, добавьте ссылку на библиотеку jQuery либо из CDN, либо из локального файла.

Выберите радиокнопку с помощью ID

Как и в JavaScript, для доступа к элементу DOM по идентификатору мы используем префикс #. Однако, точный синтаксис зависит от версии используемого jQuery.

Текущая стабильная версия jQuery - 3.4.1.

Версия jQuery равна или выше (>=) 1.6

Если используемая версия jQuery больше или равна 1.6, мы используем prop для установки проверяемого атрибута в true.

$("#myradio_1").prop("checked", true);

Вывод: Выбрана радио кнопка 1.

Версией jQuery являются версии до (<) 1.6

Если версия jQuery до 1.6, мы можем обновить attr как проверено.

$("#myradio_2").attr('checked', 'checked');   

Выход: Выбрана радио кнопка 2

Выберите радиокнопку, используя значение

Мы также можем обновить выбранное значение для радиокнопки на основе значения кнопки.

$("input[name=radiobutton][value='1']").prop("checked",true);

Выход: Выбрана радио кнопка 2

Проверьте радиокнопку, основанную на нажатии кнопки

Как только мы узнаем, как обновить переключатель с помощью JavaScript или jQuery, мы можем обновить выделение, основанное на каком-то событии, например, щелчке по кнопке или любом другом элементе выделения. Чтобы протестировать это, давайте обновим нашу форму, чтобы добавить кнопку.

<div id='radiobuttonset'>
     <input type='radio' id='myradio_1' name='radiobutton' value='1' />1
     <input type='radio' id='myradio_2' name='radiobutton' value='2' />2
     <input type='radio' id='myradio_3' name='radiobutton' value='3' />3 
</div>
    <button id="button_1">check 1</button>

Затем мы можем добавить событие щелчка по кнопке. Нажав на кнопку, он выбирает первую радиокнопку.

$("#button_1").click(function() {
    $("input[name=radiobutton]").val(['1']);
});

Выход: Радио кнопка 1 выбрана