Установите переключатель с помощью javascript

98

По какой-то причине я не могу этого понять.

У меня есть несколько переключателей в моем html, которые переключают категории:

<input type="radio" name="main-categories" id="_1234" value="1234" /> // All
<input type="radio" name="main-categories" id="_2345" value="2345" /> // Certain category
<input type="radio" name="main-categories" id="_3456" value="3456" /> // Certain category
<input type="radio" name="main-categories" id="_4567" value="4567" /> // Certain category

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

Я пробовал версии этого (с jQuery и без):

document.getElementById('#_1234').checked = true;

Но вроде не обновляется. Мне нужно, чтобы он явно обновлялся, чтобы пользователь мог его видеть. Кто-нибудь может помочь?

РЕДАКТИРОВАТЬ: Я просто устал и упустил из виду #, спасибо, что указали на это, и $.prop().

javascript html radio-button птф
источник
Отметьте этот вопрос StackOverflow: [Как проверить переключатель с помощью jQuery] [1] [1]: stackoverflow.com/questions/5665915/…
Мэнди Шоп
8
изменить наdocument.getElementById('_1234').checked = true;
stackErr
1
@stackErr без#
Тим Сегин
Извините, просто неправильный копипаст. Обновлено сейчас. @FelipeKM Тогда, пожалуйста, помогите мне, я не нашел ни одного, что поможет.
ptf
@kjelelokk проверьте мой комментарий или ответ
Pointys

Ответы:

159

Не смешивайте синтаксис CSS / JQuery ( #для идентификатора) с собственным JS.

Собственное решение JS:

document.getElementById("_1234").checked = true;

Решение JQuery:

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

завг
источник
1
Технически это синтаксис селектора CSS. jQuery просто заимствовал и расширил его
Тим Сегин
querySelectorЯ полагаю, jQuery получил это от .
Энди
намного лучше чем.attr("checked", "checked")
ma77c
@Andy - Sizzle использовался в jQuery с начала 2006 года. ( en.wikipedia.org/wiki/JQuery#History ). querySelectorне поставлялась в браузерах до 2009 года и не использовалась разработчиками широко до некоторого времени после этого. Я никогда так часто не использовал jQuery, но он значительно повлиял на эволюцию JS.
Rounin
это устанавливает флажок, но не обязательно запускает связанное событие. какое событие запускается, когда пользователь нажимает переключатель?
robisrob
17

Если вы хотите установить кнопку «1234», вам нужно использовать ее «id»:

document.getElementById("_1234").checked = true;

Когда вы используете API браузера ("getElementById"), вы не используете синтаксис селектора; вы просто передаете фактическое значение id, которое ищете. Вы используете синтаксис селектора с jQuery или .querySelector()и .querySelectorAll().

Заостренный
источник
все получают элемент по идентификатору. У меня есть несколько переключателей с одинаковым именем. и я думаю, что это то, что нужно большинству людей, чтобы выбрать группу радиостанций по имени, а затем на основе стоимости проверить одно из них.
Ndm Gjr
@NadeemGorsi атрибут "id" не может использоваться более чем одним элементом. Все значения "id" должны быть уникальными на данной странице.
Pointy
10

Сегодня, в 2016 году, его можно использовать document.querySelectorбез знания идентификатора (особенно, если у вас более двух переключателей):

document.querySelector("input[name=main-categories]:checked").value
StanE
источник
3
Хорошо, но как я могу получить обратный эффект или проверить радио по значению ... и вот о чем, собственно, был вопрос.
Ndm Gjr
1
@NadeemGorsi Я дал ответ, чтобы выбрать или "отметить" переключатель с помощью QuerySelector
kevinf
6

Самый простой способ, вероятно, был бы с jQuery, а именно:

$(document).ready(function(){
  $("#_1234").attr("checked","checked");
})

Это добавляет новый атрибут "checked" (который в HTML не требует значения). Просто не забудьте включить библиотеку jQuery:

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
Эссер
источник
Или просто$("#_1234").prop("checked", true)
undefined
3

Используя document.getElementById()функцию, вам не нужно проходить #перед идентификатором элемента.

Код:

document.getElementById('_1234').checked = true;

Демо: JSFiddle

Даниэль Кмак
источник
3

Я смог выбрать (проверить) кнопку радио ввода, используя этот код Javascript в Firefox 72 на странице параметров веб-расширения, чтобы ЗАГРУЗИТЬ значение:

var reloadItem = browser.storage.sync.get('reload_mode');
reloadItem.then((response) => {
    if (response["reload_mode"] == "Periodic") {
        document.querySelector('input[name=reload_mode][value="Periodic"]').click();
    } else if (response["reload_mode"] == "Page Bottom") {
        document.querySelector('input[name=reload_mode][value="Page Bottom"]').click();
    } else {
        document.querySelector('input[name=reload_mode][value="Both"]').click();
    }
});

Где связанный код для СОХРАНИТЬ, значение было:

reload_mode: document.querySelector('input[name=reload_mode]:checked').value

Данный HTML выглядит следующим образом:

    <input type="radio" id="periodic" name="reload_mode" value="Periodic">
    <label for="periodic">Periodic</label><br>
    <input type="radio" id="bottom" name="reload_mode" value="Page Bottom">
    <label for="bottom">Page Bottom</label><br>
    <input type="radio" id="both" name="reload_mode" value="Both">
    <label for="both">Both</label></br></br>
Кевинф
источник