Cách sử dụng querySelectorAll chỉ cho các phần tử có tập thuộc tính cụ thể?

Tôi đang cố gắng sử dụng document.querySelectorAllcho tất cả các hộp kiểm có valuethuộc tính được đặt.

Có các hộp kiểm khác trên trang chưa được valueđặt và giá trị khác nhau cho mỗi hộp kiểm. Id và tên không phải là duy nhất.

Thí dụ: <input type="checkbox" id="c2" name="c2" value="DE039230952"/>

Làm cách nào để chỉ chọn những hộp kiểm đã đặt giá trị?

Bạn có thể sử dụng querySelectorAll()như thế này:

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

Điều này được dịch thành:

lấy tất cả các đầu vào có thuộc tính "giá trị" và có thuộc tính "giá trị" không trống.

Trong bản trình diễn này , nó vô hiệu hóa hộp kiểm có giá trị không trống.

Mẹo bổ sung:

Nhiều "nots", đầu vào KHÔNG bị ẩn và KHÔNG bị tắt:

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

Ngoài ra, bạn có biết bạn có thể làm điều này:

node.parentNode.querySelectorAll('div');

Điều này tương đương với jQuery's:

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

Mà sẽ tìm thấy hiệu quả tất cả các div trong "nút" và bên dưới một cách đệ quy, HOT DAMN!

Với ví dụ của bạn:

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

Thay thế $$ bằng document.querySelectorA Tất cả trong các ví dụ:

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

Sử dụng các ví dụ trực tiếp với:

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

Một số bổ sung:

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