Установите переключатель с помощью 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>

— Кевинф
источник