4

Quiero obtener todos los valores de los input tipo radio para luego compararlo con una variable con un valor puesto y si algunos de esos input tipo radio coincide con el valor de esa variable me seleccione ese input tipo radio

He estado intentado obteniendo la cantidad de input tipo radio que tengan la misma clase y luego mostrar en un alert el valor de esos input para luego compararlos con el valor de una variable pero solo me muestra el valor del primer input. ¿Alguien puede ayudarme?

Como puedo hacer que cuando un valor de todos esos radios sea igual que el valor var zona= "B3"; se active?

  • Ya pude hacer que active el radio con el valor indicado Use el ejemplo de KIKO_L y puse esto en lugar del alertar : $(this).attr('checked', true);

var zona = "B3";
$(".zona").each(function() {
if($(this).val() === zona)
{
 $(this).attr('checked', true);
}
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <title>Document</title>
</head>

<body>
  <div class="" id="modalAddPermiso" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
    <div class="modal-dialog" role="document">
      <div class="modal-content">
        <div class="modal-header">
          <h5 class="modal-title" id="examplehttps://es.stackoverflow.com/posts/159707/edit#ModalLabel">Asignación de Permisos por Paginas</h5>
        </div>
        <div class="modal-body">
          <form id="form_permiso" action="" method="POST">
            <div class="form-group">
              <table class="table table-striped table-condensed">
                <label for="Zona">Zona</label>
                <tbody>
                  <tr>
                    <td>
                      <label for="" class="radio-inline">
                      <input type="radio" class="zona"  name="zonaE" id="zonaE" value="A1" >A1
                    </label>
                    </td>
                    <td>
                      <label for="" class="radio-inline">
                    <input type="radio" class="zona" name="zonaE" id="zonaE" value="A2">A2
                  </label>
                    </td>
                    <td>
                      <label for="" class="radio-inline">
                    <input type="radio" class="zona" name="zonaE" id="zonaE" value="A3" >A3
                  </label>
                    </td>
                    <td>
                      <label for="" class="radio-inline">
                    <input type="radio" class="zona" name="zonaE" id="zonaE" value="A4" >A4
                  </label>
                    </td>
                    <td>
                      <label for="" class="radio-inline">
                    <input type="radio" class="zona" name="zonaE" id="zonaE" value="A5" >A5
                  </label>
                    </td>
                  </tr>
                  <tr>
                    <td>
                      <label for="" class="radio-inline">
                    <input type="radio" class="zona" name="zonaE" id="zonaE" value="B1" >B1
                  </label>
                    </td>
                    <td>
                      <label for="" class="radio-inline">
                  <input type="radio" class="zona" name="zonaE" id="zonaE" value="B2">B2
                </label>
                    </td>
                    <td>
                      <label for="" class="radio-inline">
                  <input type="radio" class="zona" name="zonaE" id="zonaE" value="B3" >B3
                </label>
                    </td>
                    <td>
                      <label for="" class="radio-inline">
                  <input type="radio" class="zona" name="zonaE" id="zonaE" value="B4" >B4
                </label>
                    </td>
                    <td>
                      <label for="" class="radio-inline">
                <label for="" class="radio-inline">
                  <input type="radio" class="zona" name="zonaE" id="zonaE" value="B5" >B5
                </label>
                    </td>
                  </tr>
                  <tr>
                    <td>
                      <label for="" class="radio-inline">
                  <input type="radio" class="zona" name="zonaE" id="zonaE" value="C1" >C1
                </label>
                    </td>
                    <td>
                      <label for="" class="radio-inline">
                <input type="radio" class="zona" name="zonaE" id="zonaE" value="C2">C2
              </label>
                    </td>
                    <td>
                      <label for="" class="radio-inline">
                <input type="radio" class="zona" name="zonaE" id="zonaE" value="C3" >C3
              </label>
                    </td>
                    <td>
                      <label for="" class="radio-inline">
              <label for="" class="radio-inline">
                <input type="radio" class="zona" name="zonahttps://es.stackoverflow.com/posts/159707/edit#E" id="zonaE" value="C4" >C4
              </label>
                    </td>
                    <td>
                      <label for="" class="radio-inline">
                <input type="radio" class="zona" name="zonaE" id="zonaE" value="C5" >C5
              </label>
                    </td>
                  </tr>

                </tbody>
              </table>
            </div>

          </form>
        </div>
        <div class="modal-footer">
          <button type="button" class="btn btn-danger" data-dismiss="modal">Cancelar</button>
          <button type="button" class="btn btn-primary pull-left" id="btnsavepermiso">Guardar</button>
        </div>
      </div>
    </div>
  </div>
</body>

</html>

1 respuesta 1

4

El for no para porque tienes puesto i = nradios como condición de parada en el for (en vez de i<=nradios). Además, al hacer var valorradio = $(".zona").val(); estás asignado a valorradio siempre el valor del primer radiobutton (A1).

La mejor manera de iterar con jQuery es utilizando each. Utiliza el selector de clases para obtener todos los elementos con clase zona y luego itera por ellos con each:

var zona = "B3";
$(".zona").each(function() {
if($(this).val() === zona)
{
	alert('Este (' + $(this).val() + ') es el radio B3');
}
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <title>Document</title>
</head>

<body>
  <div class="" id="modalAddPermiso" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
    <div class="modal-dialog" role="document">
      <div class="modal-content">
        <div class="modal-header">
          <h5 class="modal-title" id="exampleModalLabel">Asignación de Permisos por Paginas</h5>
        </div>
        <div class="modal-body">
          <form id="form_permiso" action="" method="POST">
            <div class="form-group">
              <table class="table table-striped table-condensed">
                <label for="Zona">Zona</label>
                <tbody>
                  <tr>
                    <td>
                      <label for="" class="radio-inline">
                      <input type="radio" class="zona"  name="zonaE" id="zonaE" value="A1" >A1
                    </label>
                    </td>
                    <td>
                      <label for="" class="radio-inline">
                    <input type="radio" class="zona" name="zonaE" id="zonaE" value="A2">A2
                  </label>
                    </td>
                    <td>
                      <label for="" class="radio-inline">
                    <input type="radio" class="zona" name="zonaE" id="zonaE" value="A3" >A3
                  </label>
                    </td>
                    <td>
                      <label for="" class="radio-inline">
                    <input type="radio" class="zona" name="zonaE" id="zonaE" value="A4" >A4
                  </label>
                    </td>
                    <td>
                      <label for="" class="radio-inline">
                    <input type="radio" class="zona" name="zonaE" id="zonaE" value="A5" >A5
                  </label>
                    </td>
                  </tr>
                  <tr>
                    <td>
                      <label for="" class="radio-inline">
                    <input type="radio" class="zona" name="zonaE" id="zonaE" value="B1" >B1
                  </label>
                    </td>
                    <td>
                      <label for="" class="radio-inline">
                  <input type="radio" class="zona" name="zonaE" id="zonaE" value="B2">B2
                </label>
                    </td>
                    <td>
                      <label for="" class="radio-inline">
                  <input type="radio" class="zona" name="zonaE" id="zonaE" value="B3" >B3
                </label>
                    </td>
                    <td>
                      <label for="" class="radio-inline">
                  <input type="radio" class="zona" name="zonaE" id="zonaE" value="B4" >B4
                </label>
                    </td>
                    <td>
                      <label for="" class="radio-inline">
                <label for="" class="radio-inline">
                  <input type="radio" class="zona" name="zonaE" id="zonaE" value="B5" >B5
                </label>
                    </td>
                  </tr>
                  <tr>
                    <td>
                      <label for="" class="radio-inline">
                  <input type="radio" class="zona" name="zonaE" id="zonaE" value="C1" >C1
                </label>
                    </td>
                    <td>
                      <label for="" class="radio-inline">
                <input type="radio" class="zona" name="zonaE" id="zonaE" value="C2">C2
              </label>
                    </td>
                    <td>
                      <label for="" class="radio-inline">
                <input type="radio" class="zona" name="zonaE" id="zonaE" value="C3" >C3
              </label>
                    </td>
                    <td>
                      <label for="" class="radio-inline">
              <label for="" class="radio-inline">
                <input type="radio" class="zona" name="zonaE" id="zonaE" value="C4" >C4
              </label>
                    </td>
                    <td>
                      <label for="" class="radio-inline">
                <input type="radio" class="zona" name="zonaE" id="zonaE" value="C5" >C5
              </label>
                    </td>
                  </tr>

                </tbody>
              </table>
            </div>

          </form>
        </div>
        <div class="modal-footer">
          <button type="button" class="btn btn-danger" data-dismiss="modal">Cancelar</button>
          <button type="button" class="btn btn-primary pull-left" id="btnsavepermiso">Guardar</button>
        </div>
      </div>
    </div>
  </div>
</body>

</html>

Más info sobre each

2
  • Muchas gracias Kiko_L, pero ahora como ago para que ese input con ese valor se quede marcada ? intente poner $(".zona").attr('checked', true); pero me marca el ultimo input
    – Luis
    Commented el 30 abr. 2018 a las 14:02
  • Ya pude hacer que active el input puse esto en vez del alerta : $(this).attr('checked', true);
    – Luis
    Commented el 30 abr. 2018 a las 20:50

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.