วิธีใช้ querySelectorAll เฉพาะสำหรับองค์ประกอบที่มีชุดแอตทริบิวต์เฉพาะ

ฉันกำลังพยายามใช้document.querySelectorAllสำหรับช่องทำเครื่องหมายทั้งหมดที่มีvalueชุดแอตทริบิวต์

มีช่องทำเครื่องหมายอื่น ๆ บนหน้าที่ไม่ได้valueตั้งค่าไว้และค่าจะแตกต่างกันสำหรับแต่ละช่องทำเครื่องหมาย รหัสและชื่อไม่ซ้ำกัน

ตัวอย่าง: <input type="checkbox" id="c2" name="c2" value="DE039230952"/>

ฉันจะเลือกเฉพาะช่องทำเครื่องหมายที่ตั้งค่าไว้ได้อย่างไร

คุณสามารถใช้querySelectorAll()สิ่งนี้:

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

สิ่งนี้แปลเป็น:

รับอินพุตทั้งหมดที่มีแอตทริบิวต์ "value" และมีแอตทริบิวต์ "value" ที่ไม่ว่างเปล่า

ในการสาธิตนี้จะปิดใช้งานช่องทำเครื่องหมายด้วยค่าที่ไม่ว่างเปล่า

เคล็ดลับพิเศษ:

"nots" หลายรายการอินพุตที่ไม่ได้ซ่อนและไม่ปิดใช้งาน:

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

คุณรู้หรือไม่ว่าคุณสามารถทำได้:

node.parentNode.querySelectorAll('div');

สิ่งนี้เท่ากับ jQuery's:

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

ซึ่งจะค้นหา div ทั้งหมดใน "node" และด้านล่างซ้ำได้อย่างมีประสิทธิภาพ HOT DAMN!

ด้วยตัวอย่างของคุณ:

<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 $()