Bagaimana cara menggunakan querySelectorAll hanya untuk elemen yang memiliki set atribut tertentu?

124

Saya mencoba menggunakan document.querySelectorAlluntuk semua kotak centang yang memiliki valueset atribut.

Ada kotak centang lain di halaman yang belum valuedisetel, dan nilainya berbeda untuk setiap kotak centang. Id dan namanya tidak unik.

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

Bagaimana cara memilih hanya kotak centang yang nilainya ditetapkan?

javascript css-selectors selectors-api Soryn
sumber
1
apakah ini termasuk kosong? sepertivalues=""
Joseph
kotak centang lainnya tidak memiliki nilai sama sekali sehingga tidak perlu menyertakannya.
Soryn

Jawaban:

217

Anda bisa menggunakan querySelectorAll()seperti ini:

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

Ini diterjemahkan menjadi:

dapatkan semua masukan dengan atribut "nilai" dan memiliki atribut "nilai" yang tidak kosong.

Dalam demo ini , ini menonaktifkan kotak centang dengan nilai yang tidak kosong.

Joseph
sumber
Bagaimana cara memilih input jenis kotak centang saja? ada banyak tag masukan lain yang memiliki atribut nilai, tetapi saya hanya ingin kotak centang.
Soryn
1
@Sory menambahkan [type="checkbox"]. Memperbarui jawaban saya.
Joseph
2
JAWABAN BESAR! Ini menghilangkan sebagian besar kebutuhan untuk menyertakan jQuery di perpustakaan mini untuk traversal DOM. Saya punya beberapa tip tambahan dalam jawaban di bawah ini.
mattdlockyer
bisakah Anda memberi tahu saya apa input sintaks ini [nilai] [type = "checkbox"]: tidak ([value = ""] saya tidak melihat sintaks seperti ini sebelumnya di javascript
blackHawk
@blackHawk Sintaksnya menggunakan CSS Selectors. Seperti yang ditentukan oleh MDN, ini "adalah string yang berisi satu atau lebih pemilih CSS yang dipisahkan oleh koma". Anda dapat membaca tentang Pemilih CSS di sini .
martieva
21

Tips Tambahan:

Beberapa "not", masukan yang TIDAK disembunyikan dan TIDAK dinonaktifkan:

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

Tahukah Anda bahwa Anda dapat melakukan ini:

node.parentNode.querySelectorAll('div');

Ini setara dengan jQuery:

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

Yang secara efektif akan menemukan semua div di "node" dan di bawahnya secara rekursif, HOT DAMN!

mattdlockyer
sumber
20

Dengan contoh Anda:

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

Ganti $$ dengan document.querySelectorAll dalam contoh:

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

Gunakan contoh langsung dengan:

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

Beberapa tambahan:

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