Buen dia!
El pseudo-selector :checked
selecciona los inputs que están seleccionados, entonces al no seleccionar el input el método querySelector
retorna null
, ya que no hay ningún elemento que coincida con el selector.
Para realizar la validación con JavaScript seria de esta manera:
// Selecciona el input sin importar si esta :checked o no
// si deseas seleccionar si o si un input que sea de tipo
// checkbox usa el siguiente selector:
// 'input[name="1"][type="checkbox"]'
const resp1 = document.querySelector('input[name="1"]');
// Tip: te recomiendo usar 'let' o 'const' en lugar de 'var'
// ya que su uso es considerado una mala practica.
// Los inputs de tipo checkbox tiene la propiedad 'checked'
// que es un boolean respectivamente de si esta o no
// seleccionada la casilla.
// Solo nos queda evaluar si esta o no seleccionada.
if (resp1.checked) {
console.log(resp1.value)
} else {
console.log('Necesita seleccionar una opción')
}
Los input
ya tienen el atributo required
por defecto por lo que al tratar de enviar el formulario te pedirá que selecciones la casilla, de esta manera:
<form>
<input
type="checkbox"
name="1"
value="Uno"
required
/>
<button type="submit">Enviar</button>
</form>
BONUS
Este tipo de inputs independiente de estar o no seleccionado siempre te devolverá el valor "on" si, no le pones ningún valor en el atributo 'value' del HTML