Перевірте перемикач за допомогою JavaScript

95

З якихось причин я не можу зрозуміти це.

У моєму 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;

Але це, схоже, не оновлюється. Він потрібен для видимого оновлення, щоб користувач міг це побачити. Хто-небудь може допомогти?

EDIT: Я просто втомився і пропустив #, дякую, що вказав на це, що і $.prop().

javascript html radio-button

— птф
джерело

Перевірте цей StackOverflow питання: [Як перевірити радіокнопку з JQuery] [1] [1]: stackoverflow.com/questions/5665915 / ...

— Менді Шоеп

8

змінити наdocument.getElementById('_1234').checked = true;

— stackErr

1

@stackErr without the#

— Tim Seguine

Вибачте, просто неправильна копія-вставка. Оновлено зараз. @FelipeKM Тоді, будь ласка, допоможіть мені, я не знайшов такого, що допомагає.

— ptf

@kjelelokk перевірити мій коментар або відповідь

— Pointys

151

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

Власне рішення JS:

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

Рішення JQuery:

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

— завг
джерело

1

Технічно це синтаксис селектора CSS. jQuery щойно запозичив і продовжив його

— Тім Сегін

jQuery отримав це, querySelectorя б уявив.

— Енді,

набагато краще, ніж.attr("checked", "checked")

— ma77c

@Andy - Sizzle використовувався в jQuery з початку 2006 року. ( en.wikipedia.org/wiki/JQuery#History ). querySelectorне надходив у браузерах до 2009 р. і не використовувався широко розробниками до деякого часу після цього. Я ніколи не використовував jQuery так багато, але це суттєво вплинуло на розвиток JS.

— Рунін,

це встановлює прапорець, але не обов'язково викликає пов'язану подію. яка подія спрацьовує, коли користувач натискає перемикач?

— robisrob

16

Якщо ви хочете встановити кнопку "1234", вам потрібно використовувати її "id":

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

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

— Гострий
джерело

всі отримують елемент за ідентифікатором. У мене є більше одного перемикача з однаковим ім'ям. і я думаю, що це те, що більшості людей потрібно вибрати групу радіостанцій за іменем, а потім на основі вартості перевірити одну з них.

— Ndm Gjr,

@NadeemGorsi атрибут "id" не може бути спільним для більш ніж одного елемента. Усі значення "id" мають бути унікальними на даній сторінці.

— Пойнті

9

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

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");
})

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

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>

— Ессер
джерело

Або просто$("#_1234").prop("checked", true)

— невизначений

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>

— кевінф
джерело