केवल विशिष्ट विशेषता सेट करने वाले तत्वों के लिए querySelectorAll का उपयोग कैसे करें?

Question

मैं document.querySelectorAllउन सभी चेकबॉक्सों के लिए उपयोग करने का प्रयास कर रहा हूं जिनमें valueविशेषता सेट है।

पृष्ठ पर अन्य चेकबॉक्स हैं जो valueसेट नहीं हैं , और प्रत्येक चेकबॉक्स के लिए मूल्य अलग है। आईडी और नाम हालांकि अद्वितीय नहीं हैं।

उदाहरण: <input type="checkbox" id="c2" name="c2" value="DE039230952"/>

मैं उन चेकबॉक्सों का चयन कैसे कर सकता हूं जिनमें मान सेट हैं?

Comments

क्या इसमें रिक्तता शामिल है? जैसेvalues=""

— जोसेफ

अन्य चेकबॉक्स का कोई मूल्य नहीं है, इसलिए इसे शामिल नहीं करना होगा।

— सोरिन

Answer 1

आप querySelectorAll()इस तरह का उपयोग कर सकते हैं :

var test = document.querySelectorAll('input[value][type="checkbox"]:not([value=""])');

यह करने के लिए अनुवाद:

विशेषता "मान" के साथ सभी इनपुट प्राप्त करें और विशेषता "मान" है जो रिक्त नहीं है।

इस डेमो में , यह गैर-रिक्त मान के साथ चेकबॉक्स को अक्षम करता है।

Comments

हालांकि केवल चेकबॉक्स प्रकार इनपुट का चयन कैसे करें? बहुत सारे अन्य इनपुट टैग हैं जिनमें मूल्य विशेषताएँ हैं, लेकिन मैं केवल चेकबॉक्स चाहता हूं।

— सोरिन

जोड़ने @Soryn [type="checkbox"]। मेरे उत्तर को अपडेट किया।

— जोसेफ

बहुत बढ़िया जवाब! यह काफी हद तक डोम ट्रेवर्सल के लिए मिनी पुस्तकालयों में jQuery को शामिल करने की आवश्यकता को समाप्त करता है। मुझे नीचे एक उत्तर में कुछ अतिरिक्त सुझाव मिले हैं।

— Mattdlockyer

क्या आप मुझे बता सकते हैं कि यह वाक्यविन्यास इनपुट क्या है [मूल्य] [प्रकार = "चेकबॉक्स"]: नहीं ([मूल्य = ""] मैंने इस वाक्य-विन्यास को इस तरह से पहले जावास्क्रिप्ट में नहीं देखा था

— ब्लैकहॉक १16

@blackHawk सिंटैक्स CSS चयनकर्ताओं का उपयोग करता है। जैसा कि एमडीएन द्वारा निर्दिष्ट किया गया है "यह एक स्ट्रिंग है जिसमें एक या अधिक सीएसएस चयनकर्ताओं को कॉमा द्वारा अलग किया जाता है"। आप यहाँ CSS चयनकर्ताओं के बारे में पढ़ सकते हैं ।

— 14

Answer 2

अतिरिक्त सुझाव:

एकाधिक "नोट", इनपुट जो छिपा नहीं है और अक्षम नहीं है:

:not([type="hidden"]):not([disabled])

क्या आप जानते हैं कि आप यह कर सकते हैं:

node.parentNode.querySelectorAll('div');

यह jQuery के लिए समान है:

$(node).parent().find('div');

जो प्रभावी रूप से "नोड" और पुनरावर्ती रूप से, हॉट डीएएमएन के नीचे सभी डिवीजनों को ढूंढेगा!

Answer 3

अपने उदाहरण के साथ:

<input type="checkbox" id="c2" name="c2" value="DE039230952"/>

$$ को document.querySelectorAll से बदलें उदाहरण में:

$$('input') //Every input
$$('[id]') //Every element with id
$$('[id="c2"]') //Every element with id="c2"
$$('input,[id]') //Every input + every element with id
$$('input[id]') //Every input including id
$$('input[id="c2"]') //Every input including id="c2"
$$('input#c2') //Every input including id="c2" (same as above)
$$('input#c2[value="DE039230952"]') //Every input including id="c2" and value="DE039230952"
$$('input#c2[value^="DE039"]') //Every input including id="c2" and value has content starting with DE039
$$('input#c2[value$="0952"]') //Every input including id="c2" and value has content ending with 0952
$$('input#c2[value*="39230"]') //Every input including id="c2" and value has content including 39230

सीधे उदाहरणों का उपयोग करें:

const $$ = document.querySelectorAll.bind(document);

कुछ अतिरिक्त:

$$(.) //The same as $([class])
$$(div > input) //div is parent tag to input
document.querySelector() //equals to $$()[0] or $()