1

Tengo una duda; de cómo mostrar dinámicamente en el DOM los elementos seleccionados por un input type radio.

Actualmente como tengo el código funciona así: selecciono un elemento de tipo radio y luego presiono un botón de tipo submit y allí me muestra la información.

Yo quisiera que se muestre apenas seleccione el type radio sin necesidad de utilizar el submit.

Fragmento JavaScript:

$("#confirmar").click(function () {
  //Creo variables para asegurarme que no me arroje NaN
  let checkRadio = parseInt($("input:radio:checked").val()) || 0;
  let nuSections = parseInt($("#nuSecciones").val()) || 1;
  let priceSections = parseInt(precioSecciones) || 0;
  let switchCheck = parseInt($("#switchMantenimiento:checked").val()) || 0;

  // Compruebo si se selecciono algún servicio
  if (!checkRadio) {
    nuSections = 0;
    alert("Por favor, seleccione un servicio");
    console.log("no se seleccionó ningún servicio.");
  } else {
    console.log("Seleccionado");
  }

  let total = 0;

  total = checkRadio + nuSections * priceSections + switchCheck;
  totalWeb.innerText = `$ ${total}`;
});

Fragmento HTML:

<tr id="porfolio">
  <!-- HTML-->
  <td>
    <div class="form-check">
      <input class="form-check-input input" type="radio" name="servicios" id="radios1" value="2300" />
      <label class="form-check-label" for="radios1"> Portfolio </label>
    </div>
  </td>
  <td>
    $2300
  </td>
</tr>
<tr id="eCommerce">
  <td>
    <div class="form-check">
      <input
        class="form-check-input input" type="radio" name="servicios" id="radios2" value="2500" />
      <label class="form-check-label" for="radios2"> eCommerce </label>
    </div>
  </td>
  <td>
    $2500
  </td>
</tr>
1
  • no comprendo bien que quieres hacer. Primero que en el codigo no hay ningun submit y le estas haciendo un evento click a un elemento que no existe. Lo que quieres es que al selecionar los radio se muestre 2300$ o 2500$? si es asi deberias asignarle el evento click a los radios Commented el 21 abr. 2021 a las 1:30

1 respuesta 1

1

Esta es una forma de hacerlo

Si utilizas jQuery

Simplemente puedes utilizar las siguientes líneas, por ejemplo:

$("[name='servicios']").on("click", function () {
    console.log($(this).val());
});

Por lo tanto, si realizamos una implementación completa tendrías el siguiente resultado:

$("[name='servicios']").on("click", function() {
  $("#resultados").text($(this).val());
});
#resultados {
  margin-top: 30px;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<tr id="porfolio">
  <!-- HTML-->
  <td>
    <div class="form-check">
      <input class="form-check-input input" type="radio" name="servicios" id="radios1" value="2300">
      <label class="form-check-label" for="radios1"> Portfolio </label>
    </div>
  </td>
  <td>
    $2300
  </td>
</tr>
<tr id="eCommerce">
  <td>
    <div class="form-check">
      <input class="form-check-input input" type="radio" name="servicios" id="radios2" value="2500">
      <label class="form-check-label" for="radios2"> eCommerce </label>
    </div>
  </td>
  <td>
    $2500
  </td>
</tr>


<!-- Muestro los resultados acá -->
<div id="resultados"></div>

Si utilzas JavaScript Nativo

En el caso de JavaScript nativo el proceso es similar, es decir:

// Capturamos nuestros input radio
const servicios = document.querySelectorAll("[name='servicios']");

// El elemento donde queremos mostrar nuestros resultados
const resultados = document.querySelector("#resultados");

servicios.forEach(servicio => {
  
  // Y cuando el usuario haga clic sobre el elemento
  servicio.addEventListener("click", function() {
    if (resultados) resultados.textContent = this.value;
  });
});

Por lo tanto, si realizamos una implementación completa tendremos las siguientes líneas:

const servicios = document.querySelectorAll("[name='servicios']");

const resultados = document.querySelector("#resultados");

servicios.forEach(servicio => {
  servicio.addEventListener("click", function() {
    if (resultados) resultados.textContent = this.value;
  });
});
#resultados {
  margin-top: 30px;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<tr id="porfolio">
  <!-- HTML-->
  <td>
    <div class="form-check">
      <input class="form-check-input input" type="radio" name="servicios" id="radios1" value="2300">
      <label class="form-check-label" for="radios1"> Portfolio </label>
    </div>
  </td>
  <td>
    $2300
  </td>
</tr>
<tr id="eCommerce">
  <td>
    <div class="form-check">
      <input class="form-check-input input" type="radio" name="servicios" id="radios2" value="2500">
      <label class="form-check-label" for="radios2"> eCommerce </label>
    </div>
  </td>
  <td>
    $2500
  </td>
</tr>


<!-- Muestro los resultados acá -->
<div id="resultados"></div>

Para el caso de JavaScript Nativo, la siguiente línea captura el elemento que recibirá de los input ratio los valores:

const resultados = document.querySelector("#resultados");

Esto se implementó en el ejemplo anterior.

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.