Правильный способ использования Radiobuttons

99
10

Я смущен, что это правильный способ использования радиолюбителей. Скажем, у меня есть группа из 3-х радиоблоков: если все они имеют одинаковое имя/имя, она будет работать правильно, только один может быть проверен:

<label for="input-rb1" ></label><input class="radio-input" type="radio" id="input-rb1" name="input-rb1"><label for="input-rb1" class="radio-label">First radiobutton</label>
<label for="input-rb1" ></label><input class="radio-input" type="radio" id="input-rb1" name="input-rb1"><label for="input-rb1" class="radio-label">Second radiobutton</label>
<label for="input-rb1" ></label><input class="radio-input" type="radio" id="input-rb1" name="input-rb1"><label for="input-rb1" class="radio-label">Third radiobutton</label>

Проблема с этим подходом заключается в том, что я не знаю, как определить, какой из них проверен, потому что все они имеют одинаковое имя /id.

Другой способ использования разных имен/идентификаторов:

<label for="input-rb1" ></label><input class="radio-input" type="radio" id="input-rb1" name="input-rb1"><label for="input-rb1" class="radio-label">First radiobutton</label>
<label for="input-rb2" ></label><input class="radio-input" type="radio" id="input-rb1" name="input-rb2"><label for="input-rb2" class="radio-label">Second radiobutton</label>
<label for="input-rb3" ></label><input class="radio-input" type="radio" id="input-rb1" name="input-rb3"><label for="input-rb3" class="radio-label">Third radiobutton</label>

Таким образом, я знаю, как использовать JQuery, чтобы узнать, что проверено, но это позволит пользователю выбирать несколько радиостанций, например, это флажки...

Как решить эту загадку?

Спасибо !

спросил(а) 2021-01-25T17:47:33+03:00 4 месяца, 2 недели назад
1
Решение
62

id - это ключевое слово, которое можно использовать для поиска определенного элемента на странице.

<input type="radio" id="radio1">one
<input type="radio" id="radio2">two

    <input type="radio" id="radio1">one
<input type="radio" id="radio2">two

Вы заметите, что приведенный выше фрагмент позволяет вам выбирать оба переключателя. Там ничего не объединяет, и Браузер не может предположить, что они связаны.

name используется для определения значения из поля ввода - или в случае переключателей - одно значение из нескольких полей ввода. Он присоединяется к переключателям вместе, чтобы сказать: "Эй, только позвольте одному из вас быть проверенным! Это ценность, с которой мы идём!"

<input type="radio" name="radio_group">one
<input type="radio" name="radio_group">two

    <input type="radio" name="radio_group">one
<input type="radio" name="radio_group">two

Обратите внимание, что в приведенном выше коде нет идентификаторов. id и name не являются взаимозаменяемыми. Это совершенно разные атрибуты, направленные на то, чтобы сделать две совершенно разные вещи.

Другие ответы используют JQuery, и все это хорошо и хорошо, но я думаю, что важно также дать пример ванильного JS.

document.querySelectorAll("input[name='r_group']").forEach((radio) => {
if (radio.checked) {
//do whatever
}
});

document.querySelectorAll("input[name='r_group']").forEach((radio) => {
radio.addEventListener("change", () => {
if (radio.checked) alert(radio.value);
});
});
<input id="radio1" type="radio" name="r_group" value="one">one
<input id="radio2" type="radio" name="r_group" value="two">two
<input id="radio3" type="radio" name="r_group" value="three">three

ответил(а) 2021-01-25T17:47:33+03:00 4 месяца, 2 недели назад
64

Только имя переключателей должно быть одинаковым, id - уникальный атрибут в элементах. Вы должны использовать разные идентификаторы, а также использовать атрибут value для назначения значений. Код приведен ниже

<form action="">
<input type="radio" id="1" name="gender" value="male"> Male<br>
<input type="radio" id="2" name="gender" value="female"> Female<br>
</form>

Вы можете использовать jQuery, чтобы получить выбранное значение переключателя, как показано ниже.

 $("input[type='radio']").on('change', function () {
var selectedValue = $("input[name='gender']:checked").val();
if (selectedValue) {
alert(selectedValue);
}
});

ответил(а) 2021-01-25T17:47:33+03:00 4 месяца, 2 недели назад
45

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

Просто используйте следующие script-

$('input[name="input-rb1"]:checked').val();

Избегайте использования дефиса - в javascript вместо этого используйте _, если возможно

ответил(а) 2021-01-25T17:47:33+03:00 4 месяца, 2 недели назад
45

Во-первых, значения для "id" должны быть уникальными для каждого элемента. Атрибут name может (и должен) быть одинаковым для всех элементов в группе.

Затем, чтобы получить значение проверенного радио, используйте:

$('input[name=name_of_your_radiobutton]:checked').val();

ответил(а) 2021-01-25T17:47:33+03:00 4 месяца, 2 недели назад
Ваш ответ
Введите минимум 50 символов
Чтобы , пожалуйста,
Выберите тему жалобы:

Другая проблема