JavaScript ile bir radyo düğmesini kontrol edin

99

Bazı nedenlerden dolayı bunu çözemiyorum.

HTML'imde kategorileri değiştiren bazı radyo düğmeleri var:

<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

Kullanıcı istediğini seçebilir, ancak belirli bir olay tetiklendiğinde, 1234işaretli radyo düğmesi olarak ayarlanmasını istiyorum , çünkü bu varsayılan işaretli radyo düğmesidir.

Bunun sürümlerini denedim (jQuery ile ve jQuery olmadan):

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

Ancak güncellenecek gibi görünmüyor. Kullanıcının görebilmesi için görsel olarak güncellenmesine ihtiyacım var. Biri yardım edebilir mi?

DÜZENLEME: Sadece yorgunum ve göz ardı ettim #, işaret ettiğin için teşekkürler, bunu ve $.prop().

javascript html radio-button

— ptf
kaynak

Şu StackOverflow sorusunu kontrol edin: [jQuery ile bir radyo düğmesi nasıl kontrol edilir] [1] [1]: stackoverflow.com/questions/5665915/…

— Mandy Schoep

8

değiştirdocument.getElementById('_1234').checked = true;

— stackErr

1

@stackErr without the#

— Tim Seguine

Üzgünüm, sadece yanlış bir kopyala yapıştır. Şimdi güncellendi. @FelipeKM O zaman lütfen bana yardım edin, yardımcı olan birini bulamadım.

— ptf

@kjelelokk yorumumu veya Pointys cevabımı kontrol et

— stackErr

161

CSS / JQuery sözdizimini ( #tanımlayıcı için) yerel JS ile karıştırmayın.

Yerel JS çözümü:

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

JQuery çözümü:

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

— zavg
kaynak

1

Teknik olarak CSS seçici sözdizimi. jQuery ödünç aldı ve uzattı

— Tim Seguine

jQuery querySelectorbunu hayal edebileceğimden aldı.

— Andy

çok daha iyi.attr("checked", "checked")

— ma77c

@Andy - Sizzle, 2006'nın başlarından itibaren jQuery'de kullanıldı. ( en.wikipedia.org/wiki/JQuery#History ). querySelector2009 yılına kadar tarayıcılarda sevk edilmedi ve bir süre sonrasına kadar geliştiriciler tarafından yaygın olarak kullanılmıyordu. JQuery'yi hiç bu kadar çok kullanmadım, ancak JS'nin gelişimini önemli ölçüde etkiledi.

— Rounin

bu, onay kutusunu ayarlar ancak ilişkili olayı tetiklemesi gerekmez. kullanıcı bir radyo düğmesini tıkladığında hangi olay tetiklenir?

— robisrob

17

"1234" düğmesini ayarlamak istiyorsanız, "kimliği" ni kullanmanız gerekir:

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

Tarayıcı API'sini ("getElementById") kullanırken, seçici sözdizimini kullanmazsınız; sadece aradığınız gerçek "id" değerini iletirsiniz. JQuery veya .querySelector()ve ile seçici sözdizimini kullanırsınız .querySelectorAll().

— Sivri
kaynak

herkes öğeyi kimliğine göre alıyor Aynı ada sahip birden fazla radyo düğmem var. ve bence çoğu insanın isme göre bir radyo grubu seçmesi ve ardından değerine göre bunlardan birini kontrol etmesi için ihtiyaç duyduğu şey bu.

— NdmGjr

@NadeemGorsi "id" özniteliği birden fazla öğe tarafından paylaşılamaz. Tüm "id" değerleri belirli bir sayfada benzersiz olmalıdır.

— Sivri

10

Bugün, 2016 yılında document.querySelector, kimliği bilmeden kullanmak için kaydedilmiştir (özellikle 2'den fazla radyo düğmeniz varsa):

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

— StanE
kaynak

3

Tamam, ama ters etkiyi nasıl elde edebilirim veya değere göre bir radyoyu nasıl kontrol edebilirim .. ve aslında asıl soru buydu.

— NdmGjr

1

@NadeemGorsi QuerySelector kullanarak bir radyo düğmesini seçmek veya "kontrol etmek" için bir yanıt verdim

— kevinf

6

En kolay yol muhtemelen aşağıdaki gibi jQuery ile olacaktır:

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

Bu, "işaretli" (HTML'de bir değere ihtiyaç duymayan) yeni bir öznitelik ekler. JQuery kitaplığını eklemeyi unutmayın:

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

— Esser
kaynak

Ya da sadece$("#_1234").prop("checked", true)

— tanımsız

3

document.getElementById()Fonksiyonu kullanarak #elementin id'sinden önce geçmeniz gerekmez .

Kod:

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

Demo: JSFiddle

— Daniel Kmak
kaynak

3

Şu değeri YÜKLEMEK için bir Web Uzantısı seçeneği sayfasında Firefox 72'de bu Javascript kodunu kullanarak bir radyo giriş düğmesini seçebildim (kontrol ettim):

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

SAVE için ilişkili kodun değeri şuydu:

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

Aşağıdaki gibi HTML verildiğinde:

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