We can use selectors for selecting elements with specific attributes.
For instance, if we have the following HTML:
<input type='checkbox' value='apple'> apple
<input type='checkbox' value='orange'> orange
<input type='radio' value='grape'> grape
Then we can select all the checkboxes that have a value attribute set by writing:
const inputs = document.querySelectorAll('input[value][type="checkbox"]:not([value=""])');
console.log(inputs)
input gets all the input elements
[value] narrows down to inputs with the value attribute set.
[type=”checkbox”] means we get the inputs with type attribute set to checkbox .
And :not([value=””] means we get the inputs with value not set to an empty string.
Therefore, inputs should be the checkboxes in the HTML.