anular enlace href si no se seleciona opcion

[azaz]

Hola no se si es posible hacerlo de la manera que lo tengo estructurado se trata de un enlace href que te lleva a una pagina pero antes debes selecionar una opcion si no as selecionado una opcion se deberia anular el href avisando de que eliga opcion ejemplo:

Código HTML:

<input type='radio' >
<label>preferidos</label>
 
<input type='radio' >
<label>todos</label>
 
<a href="http://www.example.com/candidatos">ver candidatos</a>
 

osea que si no ha selecionado una de estas opciones que muestre un alert, se que se podria hacer llamando a una funcion javascript en el href por ejemplo href="javascript:comprobarSelecion" y entonces con location redireciono, pero quiero saber si ahi alguna manera de hacerlo de la manera que lo planteo.
saludos

[Alexis88]

Al momento de producirse el evento click en el enlace, verifica si hay elementos marcados en el documento; de no ser así, evita la redirección con el método preventDefault y muestras el mensaje de alerta, caso contrario, dejas que se realice la redirección.

Código Javascript:

document.querySelector("a").addEventListener("click", function(event){
    if (!document.querySelectorAll(":checked").length){
        event.preventDefault();
        alert("Debes de marcar una opción");
    }
}, false);
 

Saludos

[azaz]

Hola Alexis88 lo estoy probando pero no funciona si el enlace contiene una ruta en su href o eso me parece una ruta absoluta.Saludos

[Alexis88]

Tiene que funcionar, quizá estás colocando el código JavaScript en la cabecera del documento, causando que este cargue antes de que carguen los elementos del documento. Coloca dicho código luego del último elemento de tu documento y antes de la etiqueta </body>.

Saludos

[azaz]

Hola no no lo coloque al final pero no me funciona. Sólo me funciona un enlace que lo tengo con href='#'.
Voy hacer algunas pruebas haber que pasa.
Gracias y saludos.

[azaz]

Tenias razón lo tenia en mal sitio no cargando me algunos enlaces. Gracias nuevamente, saludos.

[azaz]

Hola perdona que regrese, me estaba funcionando bien lo que pasa que inserte mas enlaces en la pagina y solo funciona en el primero, como podria hacer que tubiera efecto en todos los enlaces de la web menos en uno de ellos.

codigo html

Código HTML:

<input type='radio' >
<label>preferidos</label>
 
<input type='radio' >
<label>todos</label>
 
<a href="http://www.example.com/candidatos">ver candidatos</a>
<a href="http://www.example.com/requisitos">ver requisitos</a>
<a href="http://www.forosdelweb.com/f13/">regresar</a>
 

quedria que afectara a todos los enlaces del documento menos al de regresar, me puedes ayudar saludos.

[azaz]

Vale con la propiedad querySelectorAll afecta a todos los enlaces del documento, pero como puedo evitar que afecte al enlace de regresar.
saludos.

Ya lo solucione con la propiedad querySelectorAll y recorriendo todos los enlaces y luego capturo el id con event.target.id para anular si es el enlace de regresar.
saludos

[Alexis88]

Sería más práctico si asignaras una misma clase a los enlaces que quieres que se vean afectados, luego, en lugar de tomar a los enlaces por el tipo de elemento, o sea <a>, lo harías por dicha clase.

Código Javascript:

[].forEach.call(document.querySelectorAll(".clase"), function(enlace){
    enlace.addEventListener("click", function(event){
        if (!document.querySelectorAll(":checked").length){
            event.preventDefault();
            alert("Debes de marcar una opción");
        }
    }, false);    
});
 

Saludos