Fehler beim Abfrage-Selektor für numerischen Wert

Question

Ich versuche, Kontrollkästchen-Wert für eine Filterkomponente mithilfe von Abfrage-Selektor (ohne jquery) festzulegen. Wenn der Wert für das Element eine Zeichenfolge ist, ist die Auswahl der Abfrage erfolgreich, ist dies jedoch ein numerischer Wert, schlägt sie fehl.

<div> 
    <span>Manufacturer</span> 
    <label> 
    <input type="checkbox" name="manufacturer" value="apple">Apple</label> 
</div> 

<div> 
    <span>Screen Size</span> 
    <label> 
    <input type="checkbox" value="16" name="storage">16 GB</label> 
</div> 
<button>Select</button> 


document.querySelector('button').addEventListener('click', function() { 
    document.querySelector('input[name=manufacturer][value=apple]').checked = true; 
    document.querySelector('input[name=storage][value=16]').checked = true; 
}) 

Uncaught DOMException: Fehlgeschlagen 'querySelector' auf 'Dokument' auszuführen: 'input [name = Storage] [Wert = 16]' ist kein gültiger Selektor.

https://jsfiddle.net/byqwsdog/1/

Answer 1

Sie " in den Wert Ihrer Wähler verwenden könnte: `[key = "Wert"]

document.querySelector('button').addEventListener('click',function(){ 
    document.querySelector('input[name="manufacturer"][value="apple"]').checked = true; 
    document.querySelector('input[name="storage"][value="16"]').checked = true; 
}) 

Answer 2

the specification Siehe:

Attributwerte müssen CSS-Bezeichner oder -Strings.

---

In CSS, Identifikatoren (einschließlich Elementnamen, Klassen und IDs in Selektoren) nur die Zeichen [a-zA-Z0-9] und ISO 10646 Zeichen U + 00A0 und höher, plus den Bindestrich (-) und den Unterstrich (_); können sie nicht mit einer Ziffer, zwei Bindestrichen oder einem Bindestrich beginnen, gefolgt von durch eine Ziffer. Bezeichner können auch Zeichen mit Escape-Zeichen und beliebige ISO 10646-Zeichen als numerischen Code enthalten (siehe nächster Punkt). Zum Beispiel die Kennung "B & W?" kann geschrieben werden als "B \ & W \?" oder "B \ 26 W \ 3F".

16 beginnt mit einer Ziffer, so ist es (im Gegensatz zu manufacturer, apple und storage) nicht ein Bezeichner sein.

---

Strings können entweder mit doppelten Anführungszeichen geschrieben werden oder mit einfachen Anführungszeichen.

16 ist nicht mit einer dieser geschrieben, so ist es keine Zeichenfolge.

---

Sie müssen die Nummer angeben.

document.querySelector('input[name=storage][value="16"]')