var radios = document.getElementsByTagName('input');
for (i = 0; i < radios.length; i++) {
  radios[i].onclick = function () {
    if (this.checked) {
      this.checked = false;
    }
  }
}
<div id = "container">
  <input type = "radio"  name = "x"> A
  <br>
  <input type = "radio"  name = "x"> B
</div>

Lo que quiero es marcar una de las radios y si presioné la radio marcada nuevamente para desmarcarla, pero tampoco marca en primer lugar

Cómo desmarcar una radio marcada después de que fue marcada e incluso saber si está marcada o en estado vacío

1
Joe Doe 2 sep. 2019 a las 09:04

3 respuestas

La mejor respuesta

Sugeriré que use el atributo para controlar el estado checked.

var x = document.getElementsByName('x');
x.forEach(function(e) {
  e.addEventListener('click', function(ev) {
    // set checked by data-checked attribute
    if (e.getAttribute('data-checked') == 'true') {
      e.checked = false;
      e.setAttribute('data-checked', 'false');
    } else {
      e.checked = true;
      e.setAttribute('data-checked', 'true');
    }
    // update attribute of all radios
    x.forEach(function(e2) {
      e2.setAttribute('data-checked', e2.checked);
    });
  });
});
<input type="radio" name="x" data-checked="false"> A<br>
<input type="radio" name="x" data-checked="false"> B<br>
<input type="radio" name="x" data-checked="false"> C<br>
2
Chaska 2 sep. 2019 a las 06:34

Usando su código JavaScript actual, en el momento en que haga clic en él, se comprobará primero antes de leer el código JavaScript, por lo que parecerá estar desmarcado siempre. Con mis sugerencias (no se puede evitar lo siento) use algo como esto:

var radios = document.getElementsByTagName('input');
for (i = 0; i < radios.length; i++) {
  radios[i].onmousedown = function () {
    if (this.checked) {
      this.checked = false;
      this.onchange = function () {
        this.checked = false;
      }
    }
    else  {
      this.checked = true;
      this.onchange = function () {
        this.checked = true;
      }
    }

  }
}
<div id = "container">
  <input type = "radio"  name = "x"> A
  <br>
  <input type = "radio"  name = "x"> B
</div>

Como no puedo cuestionarle por qué no puede usar la casilla de verificación, tuve que hacer esto. Funciona para mí de todos modos

1
Shizukura 2 sep. 2019 a las 06:53

Usa el siguiente código. Este es el código completo, intente usarlo:

 <!DOCTYPE html>
<html>
<head>
  <title></title>

</head>
<body >
  <div id = "container">
    <input type = "radio"  name = "x"> A
    <br>
    <input type = "radio"  name = "x"> B
  </div>

</body>
<script type="text/javascript">

var radios = document.getElementsByTagName('input');
for (i = 0; i < radios.length; i++) {
  radios[i].onclick = function () {
    console.log("==>" , this.checked);
    if (this.checked == false) {
      this.checked = true;
    }else{
      this.checked = true;
    }
  }
}
</script>

</html>
1
halfer 24 feb. 2020 a las 00:03