Periksa tombol radio dengan javascript

98

Untuk beberapa alasan, sepertinya saya tidak bisa memikirkan hal ini.

Saya memiliki beberapa tombol radio di html saya yang mengubah kategori:

<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

Pengguna dapat memilih mana saja yang dia inginkan, tetapi ketika peristiwa tertentu terpicu, saya ingin menyetel 1234agar tombol radio dicentang, karena ini adalah tombol radio yang dicentang default.

Saya telah mencoba versi ini (dengan dan tanpa jQuery):

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

Tapi sepertinya tidak diperbarui. Saya membutuhkannya untuk memperbarui secara nyata sehingga pengguna dapat melihatnya. Ada yang bisa membantu?

EDIT: Saya hanya lelah dan mengabaikan #, terima kasih telah menunjukkannya, itu dan $.prop().

javascript html radio-button ptf
sumber
Periksa pertanyaan StackOverflow ini: [Bagaimana cara memeriksa tombol radio dengan jQuery] [1] [1]: stackoverflow.com/questions/5665915/…
Mandy Schoep
8
ubah kedocument.getElementById('_1234').checked = true;
stackErr
1
@ackErr tanpa#
Tim Seguine
Maaf, salah salin-tempel. Diperbarui sekarang. @FelipeKM Kalau begitu tolong bantu saya, saya belum menemukan yang membantu.
ptf
@kjelelokk periksa komentar saya atau jawaban
Pointys

Jawaban:

159

Jangan mencampur sintaks CSS / JQuery ( #untuk pengenal) dengan JS asli.

Solusi JS asli:

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

Solusi JQuery:

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

zavg
sumber
1
Secara teknis itu adalah sintaks pemilih CSS. jQuery baru saja meminjam dan memperpanjangnya
Tim Seguine
jQuery mendapatkannya dari yang querySelectorsaya bayangkan.
Andy
jauh lebih baik daripada.attr("checked", "checked")
ma77c
@Andy - Sizzle digunakan di jQuery mulai awal tahun 2006 dan seterusnya. ( en.wikipedia.org/wiki/JQuery#History ). querySelectortidak dikirimkan di browser hingga 2009 dan tidak digunakan secara luas oleh pengembang sampai beberapa waktu setelah itu. Saya tidak pernah menggunakan jQuery sebanyak itu, tetapi itu berdampak signifikan pada evolusi JS.
Rounin
ini menyetel kotak centang tetapi tidak selalu memicu acara terkait. Peristiwa apa yang dipicu saat pengguna mengklik tombol radio?
robisrob
17

Jika Anda ingin menyetel tombol "1234", Anda perlu menggunakan "id":

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

Saat Anda menggunakan API browser ("getElementById"), Anda tidak menggunakan sintaks pemilih; Anda baru saja meneruskan nilai "id" sebenarnya yang Anda cari. Anda menggunakan sintaks pemilih dengan jQuery atau .querySelector()dan .querySelectorAll().

Runcing
sumber
setiap orang mendapatkan elemen dengan ID Saya memiliki lebih dari satu tombol radio dengan nama yang sama. dan saya pikir itulah yang dibutuhkan kebanyakan orang untuk memilih grup radio berdasarkan nama dan kemudian berdasarkan pemeriksaan nilai salah satunya.
Ndm Gjr
@NadeemGorsi atribut "id" tidak dapat dibagi oleh lebih dari satu elemen. Semua nilai "id" harus unik di halaman tertentu.
Pointy
10

Hari ini, di tahun 2016, aman digunakan document.querySelectortanpa mengetahui ID (terutama jika Anda memiliki lebih dari 2 tombol radio):

document.querySelector("input[name=main-categories]:checked").value
StanE
sumber
3
OK, tapi bagaimana saya bisa mendapatkan efek sebaliknya atau memeriksa radio berdasarkan nilai .. dan itulah pertanyaan sebenarnya.
Ndm Gjr
1
@NadeemGorsi Saya memberikan jawaban untuk memilih atau "memeriksa" tombol radio menggunakan
QuerySelector
6

Cara termudah mungkin adalah dengan jQuery, sebagai berikut:

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

Ini menambahkan atribut baru "diperiksa" (yang dalam HTML tidak membutuhkan nilai). Ingatlah untuk menyertakan pustaka jQuery:

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
Esser
sumber
Atau hanya$("#_1234").prop("checked", true)
tidak ditentukan
3

Dengan menggunakan document.getElementById()fungsi Anda tidak harus melewati #sebelum elemen id.

Kode:

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

Demo: JSFiddle

Daniel Kmak
sumber
3

Saya dapat memilih (centang) tombol input radio dengan menggunakan kode Javascript ini di Firefox 72, dalam halaman opsi Ekstensi Web untuk LOAD nilainya:

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

Dimana kode terkait untuk MENYIMPAN nilainya adalah:

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

Diberikan HTML seperti berikut:

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