Business
Jobs
  • About Us
  • Solutions
    • Job Postings
      Post your job and receive qualified candidates in 48h.
    • Candidate Assessments
      500+ technical and psychological tests, plus anti-fraud.
    • Headhunting
      Tailor-made executive search from start to finish.
    • Payroll + EOR
      Payroll dispersal and EOR across 15+ LATAM countries.
  • Pricing
  • Jobs

0

181
Views
¿Por qué mi evento de "cambio" no ha funcionado según lo previsto?

Bien, estoy practicando mi JS y HTML, mi código actual se ve así:

 document.querySelector('input[name="answer"]:checked').checked = false; let Select = document.querySelector('input[name="answer"]'); Select.addEventListener('change', function(event) { alert(event.target.value) })
 <div> <label><input type="radio" name="answer" value="1" checked="checked">1</label> <label><input type="radio" name="answer" value="2">2</label> </div>

Mi objetivo es cancelar el "marcado" de la primera radio, luego agregar un evento que mostrará el valor de cada radio cada vez que lo elija/"marque", pero como puede notar, hasta ahora la alerta solo aparecerá si elijo el primero radio. Entonces, si puedo preguntar, ¿dónde hice mal y cómo puedo solucionarlo?

pd Por el bien de la práctica, el HTML tiene que permanecer igual. Sin agregar Id u otro selector.

about 4 years ago · Juan Pablo Isaza
3 answers
Answer question

0

  1. Solo obtienes el primero con querySelector
  2. El querySelector(...:checked) funcionará porque solo puede tener una radio marcada
  3. Me gusta mucho delegar - es recomendable y tiene mucho sentido

 document.querySelector('input[name="answer"]:checked').checked = false; let radDiv = document.getElementById('radioDiv'); radDiv.addEventListener('change', function(event) { const tgt = event.target; if (tgt.matches("[type=radio][name=answer]")) { // check we have the right elements alert(tgt.value) } })
 <div id="radioDiv"> <label><input type="radio" name="answer" value="1" checked="checked">1</label> <label><input type="radio" name="answer" value="2">2</label> </div>

about 4 years ago · Juan Pablo Isaza Report

0

 document.querySelector('input[name="answer"]:checked').checked = false; let Select = document.querySelectorAll('input[name="answer"]'); Select.forEach(el => el.addEventListener('change',function (event) { Select.forEach(e => alert(e.value)); }))
 <div> <label><input type="radio" name="answer" value="1" checked="checked">1</label> <label><input type="radio" name="answer" value="2">2</label> </div>

about 4 years ago · Juan Pablo Isaza Report

0

let Select = document.querySelectorAll('input[name="answer"]'); Select.forEach(function(elem) { elem.addEventListener("change", function(event) { alert(event.target.value) }); });

Use arriba para el selector de elementos en lugar de querySelector que devuelve un solo objeto (primera coincidencia) querySelectorAll devuelve una matriz de elementos.

about 4 years ago · Juan Pablo Isaza Report
Answer question
Find remote jobs

Discover the new way to find a job!

Top jobs
Top job categories
Business
Post vacancy Pricing Sales
Legal
Terms and conditions Privacy policy
© 2026 PeakU Inc. All Rights Reserved.
Andres GPT
Show me some job opportunities
There's an error!