Javascript: Get input by its Class Name & Type Simultaneously

Question

Is there anyway I can get an input by its class name? For example I have this html code below:

<span class="inputClass">
   <input type="checkbox"/>
<span>

I would like to see if that input is selected using its class name. There is no option I can give it an ID because we do not have access to this source code.

Possible duplicate of [How to get element by class name?](https://stackoverflow.com/questions/17965956/how-to-get-element-by-class-name) — Madhawa Priyashantha, May 17 '19 at 04:04
`document.querySelector('.inputClass > input').id = 'whateverYouLike';` — Tibrogargan, May 17 '19 at 04:07
Also very similar to [How to Select Element That Does Not Have Specific Class](/21975881/how-to-select-element-that-does-not-have-specific-class) — Tibrogargan, May 17 '19 at 04:11

score 2 · Accepted Answer · answered May 17 '19 at 04:04

use document.querySelector('.inputClass > input[type="checkbox"]').

const inputEle = document.querySelector('.inputClass > input');
console.log('isChecked: ', inputEle.checked);

inputEle.addEventListener('change', function() {
    console.log(this.checked);
});

<span class="inputClass">
    <input type="checkbox"/>
<span>

score 1 · Answer 2 · answered May 17 '19 at 04:05

You can select the input from the children of the parent class

.inputClass > input[type=checkbox]

Below is working snippet.

console.log(document.querySelector('.inputClass > input[type=checkbox]').checked)

<span class="inputClass">
   <input type="checkbox"/>
<span>

Javascript: Get input by its Class Name & Type Simultaneously

2 Answers2