El problema que tengo es que al agregar la librería jsPDF dentro del código de mi script, la funcionalidad de exclusión mutua de los botones input type radio (me refiero a que cuando se hace click en un botón se elimina la selección de los demás botones, de manera que solo se pueda seleccionar un botón, a diferencia de los botones checkbox
<div class="opcionPago o1">
<input id="opcion1" name="opciones" value="opcion1" type="radio" required> <label for="opcion1">Tarjeta de crédito o débito</label>
</div>
<!--Contenedor oculto de vía tarjetas de crédito-->
<div class="contenedor-opcion" id="contenedorTarjetaCredito">
<input id="numTarjeta" name="num-tarjeta" type="number" placeholder="Número de tarjeta" required><br>
<input id="vencimiento" name="vencimiento" type="date" placeholder="Fecha de vencimiento (MM/AA)" maxlength="10" required><br>
<input id="codigoSeguridad" name="codigo-seguridad" type="number" maxlenght="3" placeholder="Código de seguridad" required><br>
<input id="nombreTitular" name="nombre-titular" type="text" placeholder="Nombre del titular" maxlength="20" required><br>
<input type="checkbox"> <label>Usar la dirección de envío como dirección de facturación</label>
</div>
<!--Forma de pago vía PayPal-->
<div class="opcionPago o2">
<input id="opcion2" name="opciones" value="opcion2" type="radio" required> <label for="opcion2">PayPal</label>
</div>
<!--Contenedor oculto de vía PayPal-->
<div class="contenedor-opcion" id="contenedorPayPal">
<input id="nombreUsuario" name="nombre-usuario" type="text" placeholder="Nombre de usuario" maxlength="33" required><br>
<input id="contraseniaPayPal" name="contrasenia-paypal" type="password" placeholder="Contraseña" maxlength="20" required><br>
<input type="checkbox"> <label>Usar la dirección de envío como dirección de facturación</label>
</div>
<!--Forma de pago vía OXXO-->
<div class="opcionPago o3">
<input id="opcion3" name="opciones" value="opcion3" type="radio" required> <label for="opcion3">OXXO</label>
</div>
<!--Contenedor oculto de vía OXXO-->
<div class="contenedor-opcion" id="contenedorOXXO">
<input id="numTarjeta2" name="num-tarjeta2" type="number" placeholder="Número de tarjeta" maxlength="16" required><br>
<input id="vencimiento2" name="vencimiento2" type="date" min="1924-01-01" max="2024-12-31" required><br>
<input id="codigoSeguridad2" name="codigo-seguridad2" type="number" placeholder="Código de seguridad" maxlength="3" required><br>
<input id="nombreTitular2" name="nombre-titular2" type="text" placeholder="Nombre del titular" maxlength="30" required><br>
<input id="direccionOXXO" name="direccion-oxxo" type="text" placeholder="Dirección de la sucursal más cercana" maxlength="100" required><br>
<input type="checkbox"> <label>Usar la dirección de envío como dirección de facturación</label>
</div>
JavaScript
import jsPDF from '../js/jsPDF.min.js';
// Fragmento de código que hace que se desplieguen las opciones del tipo de pago
const opcion1 = document.getElementById('opcion1');
const opcion2 = document.getElementById('opcion2');
const opcion3 = document.getElementById('opcion3');
const nombreUsuario = document.getElementById('nombreUsuario');
const contraseniaPayPal = document.getElementById('contraseniaPayPal');
const numTarjeta = document.getElementById('numTarjeta');
const numTarjeta2 = document.getElementById('numTarjeta2');
const vencimiento = document.getElementById('vencimiento');
const vencimiento2 = document.getElementById('vencimiento2');
const codigoSeguridad = document.getElementById('codigoSeguridad');
const codigoSeguridad2 = document.getElementById('codigoSeguridad2');
const nombreTitular = document.getElementById('nombreTitular');
const nombreTitular2 = document.getElementById('nombreTitular2');
const direccionOXXO = document.getElementById('direccionOXXO');
const contenedorTarjetaCredito = document.getElementById('contenedorTarjetaCredito');
const contenedorPayPal = document.getElementById('contenedorPayPal');
const contenedorOXXO = document.getElementById('contenedorOXXO');
var formaPago = null;
function desplegarPeticionDatos()
{
if (opcion1.checked)
{
formaPago = "Tarjeta de crédito o débito";
numTarjeta.required = true;
vencimiento.required = true;
codigoSeguridad.required = true;
nombreTitular.required = true;
nombreUsuario.required = false;
contraseniaPayPal.required = false;
numTarjeta2.required = false;
vencimiento2.required = false;
codigoSeguridad2.required = false;
nombreTitular2.required = false;
direccionOXXO.required = false;
contenedorTarjetaCredito.style.display = 'block';
contenedorPayPal.style.display = 'none';
contenedorOXXO.style.display = 'none';
}
else if (opcion2.checked)
{
formaPago = "Pay Pal";
nombreUsuario.required = true;
contraseniaPayPal.required = true;
numTarjeta.required = false;
numTarjeta2.required = false;
vencimiento.required = false;
vencimiento2.required = false;
codigoSeguridad.required = false;
codigoSeguridad2.required = false;
nombreTitular.required = false;
nombreTitular2.required = false;
direccionOXXO.required = false;
contenedorTarjetaCredito.style.display = 'none';
contenedorPayPal.style.display = 'block';
contenedorOXXO.style.display = 'none';
}
else if (opcion3.checked)
{
formaPago = "Vía OXXO";
vencimiento2.required = true;
numTarjeta2.required = true;
codigoSeguridad2.required = true;
nombreTitular2.required = true;
direccionOXXO.required = true;
nombreUsuario.required = false;
contraseniaPayPal.required = false;
numTarjeta.required = false;
vencimiento.required = false;
codigoSeguridad.required = false;
nombreTitular.required = false;
contenedorTarjetaCredito.style.display = 'none';
contenedorPayPal.style.display = 'none';
contenedorOXXO.style.display = 'block';
}
}
opcion1.addEventListener('change', desplegarPeticionDatos);
opcion2.addEventListener('change', desplegarPeticionDatos);
opcion3.addEventListener('change', desplegarPeticionDatos);
const doc = new jsPDF();
doc.text(10, 10, 'Factura de compra');
doc.save('factura-de-compra.pdf');
En la primera parte del código se encuentran los elementos HTML, en la segunda parte se encuentra un fragmento de mi script. En el script se controla que al hacer click en un determinado botón de opción (radio button), se aparezca un contenedor que inicialmente está oculto, pero que al hacer click en un botón, éste se aparezca, además de hacer que cada uno de los campos de entrada sea obligatorio cuando el contenedor está desplegado, y que haga que los campos de entrada no sean obligatorios cuando el contenedor que los contiene está oculto. La librería jsPDF se incluye al principio del código y la parte que crea los archivos PDF se encuentra debajo del fragmento que controla la lógica de los botones de opción.