Kiểm tra một nút radio bằng javascript

Vì một số lý do, tôi dường như không thể tìm ra điều này.

Tôi có một số nút radio trong html của mình để chuyển đổi các danh mục:

<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

Người dùng có thể chọn bất kỳ cái nào họ muốn, nhưng khi một sự kiện nhất định kích hoạt, tôi muốn đặt 1234thành nút radio đã chọn, vì đây là nút radio được chọn mặc định.

Tôi đã thử các phiên bản của điều này (có và không có jQuery):

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

Nhưng nó dường như không cập nhật. Tôi cần nó cập nhật rõ ràng để người dùng có thể nhìn thấy nó. Ai có thể giúp đỡ?

CHỈNH SỬA: Tôi chỉ mệt mỏi và bỏ qua #, cảm ơn vì đã chỉ ra, điều đó và $.prop().

Không trộn cú pháp CSS / JQuery ( #cho số nhận dạng) với JS gốc.

Giải pháp JS gốc:

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

Giải pháp JQuery:

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

Nếu bạn muốn đặt nút "1234", bạn cần sử dụng "id" của nó:

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

Khi bạn đang sử dụng API trình duyệt ("getElementById"), bạn không sử dụng cú pháp bộ chọn; bạn chỉ cần chuyển giá trị "id" thực tế mà bạn đang tìm kiếm. Bạn sử dụng cú pháp bộ chọn với jQuery hoặc .querySelector()và .querySelectorAll().

Hôm nay, vào năm 2016, có thể sử dụng document.querySelectormà không cần biết ID (đặc biệt nếu bạn có nhiều hơn 2 nút radio):

document.querySelector("input[name=main-categories]:checked").value

Cách dễ nhất có lẽ là với jQuery, như sau:

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

Điều này thêm một thuộc tính mới "đã kiểm tra" (trong HTML không cần giá trị). Chỉ cần nhớ bao gồm thư viện jQuery:

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

Bằng cách sử dụng document.getElementById()hàm, bạn không cần phải chuyển #trước id của phần tử.

Mã:

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

Demo: JSFiddle

Tôi đã có thể chọn (kiểm tra) một nút nhập radio bằng cách sử dụng mã Javascript này trong Firefox 72, trong trang tùy chọn Tiện ích mở rộng Web để TẢI giá trị:

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

Nơi mã được liên kết để LƯU giá trị là:

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

Cho HTML như sau:

    <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>