जावास्क्रिप्ट के साथ एक रेडियो बटन की जाँच करें

Question

किसी कारण से, मुझे यह पता नहीं लग सकता है।

मेरे 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()।

Comments

इस StackOverflow प्रश्न की जाँच करें: [jQuery के साथ एक रेडियो बटन की जांच कैसे करें] [1] [१]: stackoverflow.com/questions/5665915/…

— मैंडी शोप

बदलdocument.getElementById('_1234').checked = true;

— स्टैकएर

@stackErr बिना#

— टिम

क्षमा करें, बस एक गलत कॉपी-पेस्ट। अभी अपडेट किया गया। @FelipeKM तब कृपया मेरी मदद करें, मुझे एक भी ऐसा नहीं मिला है जो मदद करता हो।

— पीटीएफ

@kjelelokk मेरी टिप्पणी या Pointys जवाब की जाँच करें

— stackrr

Answer 1

सीएसएस / JQuery सिंटैक्स मिक्स न करें (#देशी JS के साथ पहचानकर्ता के लिए) को ।

मूल निवासी जेएस समाधान:

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

JQuery समाधान:

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

Comments

तकनीकी रूप से यह CSS चयनकर्ता वाक्य रचना है। jQuery ने सिर्फ उधार लिया और इसे बढ़ाया

— टिम सेगिन

jQuery से querySelectorमुझे लगता है कि यह मिल जाएगा।

— एंडी

की तुलना में बेहतर.attr("checked", "checked")

— ma77c

@Andy - Sizzle का उपयोग 2006 के शुरुआत से jQuery में किया गया था। ( en.wikipedia.org/wiki/JQuery#History )। querySelector2009 तक ब्राउज़रों में शिप नहीं किया गया था और कुछ समय बाद तक डेवलपर्स द्वारा व्यापक रूप से इसका उपयोग नहीं किया गया था। मैंने कभी भी jQuery का इतना अधिक उपयोग नहीं किया है, लेकिन यह JS के विकास पर काफी प्रभाव डालता है।

— रौनिन

यह चेक बॉक्स सेट करता है, लेकिन संबंधित घटना को ट्रिगर नहीं करता है। जब उपयोगकर्ता एक रेडियो बटन क्लिक करता है तो कौन सी घटना शुरू होती है?

— रॉबिस्रोब

Answer 2

यदि आप "1234" बटन सेट करना चाहते हैं, तो आपको इसकी "आईडी" का उपयोग करने की आवश्यकता है:

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

जब आप ब्राउज़र API ("getElementById") का उपयोग कर रहे हैं, तो आप चयनकर्ता सिंटैक्स का उपयोग नहीं करते हैं; आप अभी उस वास्तविक "आईडी" मान को पास करते हैं जिसे आप खोज रहे हैं। आप jQuery या साथ चयनकर्ता सिंटैक्स का उपयोग करें .querySelector()और .querySelectorAll()।

Comments

हर कोई आईडी द्वारा तत्व प्राप्त कर रहा है मेरे पास एक ही नाम के साथ एक से अधिक रेडियो बटन हैं। और मुझे लगता है कि ज्यादातर लोगों को नाम से रेडियो के एक समूह का चयन करने की आवश्यकता होती है और फिर उनमें से किसी एक के मूल्य की जांच के आधार पर।

— NDM Gjr

@NadeemGorsi "id" विशेषता को एक से अधिक तत्वों द्वारा साझा नहीं किया जा सकता है। सभी "आईडी" मान किसी दिए गए पृष्ठ पर अद्वितीय होने चाहिए।

— प्वाइंटी

Answer 3

आज, 2016 में, यह document.querySelectorआईडी को जाने बिना उपयोग करने के लिए सुरक्षित है (विशेषकर यदि आपके पास 2 से अधिक रेडियो बटन हैं):

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

Comments

ठीक है, लेकिन मैं रिवर्स प्रभाव कैसे प्राप्त कर सकता हूं या मूल्य के आधार पर रेडियो की जांच कर सकता हूं .. और वास्तव में यही सवाल था।

— NDM Gjr

@NadeemGorsi मैंने QuerySelector

— kevinf

Answer 4

सबसे सरल तरीका संभवतः 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>

Comments

या बस$("#_1234").prop("checked", true)

— अपरिभाषित

Answer 5

document.getElementById()फ़ंक्शन का उपयोग करके आपको #एलिमेंट की आईडी से पहले पास होने की आवश्यकता नहीं है ।

कोड:

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

डेमो: JSFiddle

Answer 6

मैं मूल्य को लोड करने के लिए वेब एक्सटेंशन विकल्प पृष्ठ के भीतर फ़ायरफ़ॉक्स 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>