首先:我想澄清一下，我确实在这里寻找过这个问题，但解决方案对我不起作用。
我正在为大学做一个小项目。
我需要注册新用户的信息，但我卡在单选按钮上以获取用户的性别以及他是什么类型的用户。
这是 HTML
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Registro</title>
</head>
<body>
<form>
<label for="txtIdentificacion">Identifación</label>
<input type="text" placeholder="Número de identificación" id="txtIdentificacion" required>
<label for="txtPrimerNombre">Primer Nombre</label>
<input type="text" placeholder="Primer Nombre" id="txtPrimerNombre" required>
<label for="txtSegundoNombre">Segundo Nombre</label>
<input type="text" placeholder="Segundo Nombre" id="txtSegundoNombre">
<label for="txtPrimerApellido">Primer Apellido</label>
<input type="text" placeholder="Primer Apellido" id="txtPrimerApellido" required>
<label for="txtSegundoApellido">Segundo Apellido</label>
<input type="text" placeholder="Segundo Apellido" id="txtSegundoApellido" >
<label for="txtNacionalidad">Nacionalidad</label>
<input type="text" placeholder="Nacionalidad" id="txtNacionalidad" required>
<label for="txtTipoIdentificacion">Tipo de Identificacion</label>
<input type="text" placeholder="Tipo de Identificacion" id="txtTipoIdentificacion" required>
<label for="datFechaNacimiento">Fecha de nacimiento</label>
<input type="date" id="datFechaNacimiento" required>
<label for="">Género:</label>
<label for="rbtFemenino">Femenino</label>
<input type="radio" name="rbtGenero" value="Femenino" id="rbtFemenino" required >
<label for="rbtMasculino">Masculino</label>
<input type="radio" name="rbtGenero" value="Masculino" id="rbtMasculino" required >
<label for="rbtIndefinido">Indefinido</label>
<input type="radio" name="rbtGenero" value="Indefinido" id="rbtIndefinido" required>
<label for="numNumeroTelefonico">Número Telefonico </label>
<input type="number" placeholder="Sin guiones" id="numNumeroTelefonico" required>
<label for="txtNombreUsuario">Nombre de usuario</label>
<input type="text" placeholder="Nombre de usuario" id="txtNombreUsuario" required>
<label for="txtPassword">Contraseña</label>
<input type="password" placeholder="Contraseña" id="txtPassword" required>
<label for="rbtTipoUsuario">Soy un instructor</label>
<input type="radio" name="rbtTipoUsuario" value="Instructor" id="rbtInstructor">
<label for="rbtTipoUsuario">Soy un cliente</label>
<input type="radio" name="rbtTipoUsuario" value="Cliente" id="rbtCliente">
<label for="numEmergencia">Número de emergencia</label>
<input type="number" placeholder="Sin guiones" id="numEmergencia" required>
<button type="submit" class="btnRegistrar" id="btnRegistrar">Registrar</button>
</div>
</div>
</form>
<script src="js/logicaNegociosUsuarios.js"></script>
<script src="js/logicaInterfazUsuarios.js"></script>
</body>
</html>
JS
document.querySelector('#btnRegistrar').addEventListener('click', registrarNuevoUsuario);
registrarNuevoUsuario()
function registrarNuevoUsuario() {
var aNuevoUsuario = [];
var sIdentificacion = '';
var sPrimerNombre = '';
var sSegundoNombre = '';
var sPrimerApellido = '';
var sSegundoApellido = ''
var sNacionalidad ='';
var sTipoIdentificacion = '';
var sFechaNacimiento = '';
var sGender = '';
var nNumeroTelefonico = 0;
var sNombreUsuario = '';
var sPassword = '';
var nEdad = 0;
var sTipoUsuario = '';
var nEmergencia = '';
sIdentificacion = document.querySelector('#txtIdentificacion').value;
sPrimerNombre = document.querySelector('#txtPrimerNombre').value;
sSegundoNombre = document.querySelector('#txtSegundoNombre').value;
sPrimerApellido = document.querySelector('#txtPrimerApellido').value;
sSegundoApellido = document.querySelector('#txtSegundoApellido').value;
sNacionalidad = document.querySelector('#txtNacionalidad').value;
sTipoIdentificacion = document.querySelector('#txtTipoIdentificacion').value;
sFechaNacimiento = document.querySelector('#datFechaNacimiento').value;
sGenero = document.querySelector('input[name="rbtGenero"]:checked') ? document.querySelector('input[name="rbtGenero"]:checked').value : '';
nNumeroTelefonico = document.querySelector('#numNumeroTelefonico').value;
sNombreUsuario = document.querySelector('#txtNombreUsuario').value;
sPassword = document.querySelector('#txtPassword').value;
nEdad = calcularEdad();
sTipoUsuario = document.querySelector('input[name="rbtTipoUsuario"]:checked') ? document.querySelector('input[name="rbtUserTipoUsuario"]:checked').value: '';
nEmergencia = document.querySelector('#numEmergencia').value;
aNuevoUsuario.push(sIdentificacion, sPrimerNombre, sSegundoNombre, sPrimerApellido, sSegundoApellido, sNacionalidad, sTipoIdentificacion, sFechaNacimiento, sGenero, nNumeroTelefonico, sNombreUsuario, sPassword, nEdad, sTipoUsuario, nEmergencia );
}
llenarTablaUsuarios();
function llenarTablaUsuarios(){
var listaUsuarios = obtenerUsuarios();
var cuerpoTabla = document.querySelector('#tblUserInfo tbody' );
cuerpoTabla.innerHTML = '';
for (var i = 0; i < listaUsuarios.length; i++) {
var fila = cuerpoTabla.insertRow(i);
var celdaCedula = fila.insertCell();
var celdaPrimerNombre = fila.insertCell();
var celdaSegundoNombre = fila.insertCell();
var celdaPrimerApellido = fila.insertCell();
var celdaSegundoApellido = fila.insertCell();
var celdaNacionalidad = fila.insertCell();
var celdaTipoIdentificacion = fila.insertCell();
var celdaFechaNacimiento = fila.insertCell();
var celdaEdad = fila.insertCell();
var celdaGenero = fila.insertCell();
var celdaNumeroTelefonico = fila.insertCell();
var celdaTipoUsuario = fila.insertCell();
var celdaNumeroEmergencia = fila.insertCell();
var celdaNombreUsuario = fila.insertCell();
celdaCedula.innerHTML = listaUsuarios[i][0];
celdaPrimerNombre.innerHTML = listaUsuarios[i][1];
celdaSegundoNombre.innerHTML = listaUsuarios[i][2];
celdaPrimerApellido.innerHTML = listaUsuarios[i][3];
celdaSegundoApellido.innerHTML = listaUsuarios[i][4];
celdaNacionalidad.innerHTML = listaUsuarios[i][5];
celdaTipoIdentificacion.innerHTML = listaUsuarios[i][6];
celdaFechaNacimiento.innerHTML = listaUsuarios[i][7];
celdaNombreUsuario.innerHTML = listaUsuarios[i][10];
celdaEdad.innerHTML = listaUsuarios[i][12];
celdaGenero.innerHTML = listaUsuarios[i][8];
celdaNumeroTelefonico.innerHTML = listaUsuarios[i][9];
celdaTipoUsuario.innerHTML = listaUsuarios[i][13]
celdaNumeroEmergencia.innerHTML = listaUsuarios[i][14]
}
}
function calcularEdad() {
var fechaHoy = new Date();
var fechaNacimiento = new Date(document.querySelector("#datFechaNacimiento").value);
var edad = fechaHoy.getFullYear() - fechaNacimiento.getFullYear();
var meses = fechaHoy.getMonth() - fechaNacimiento.getMonth();
if (meses < 0 || (meses === 0 && fechaHoy.getDate() < fechaNacimiento.getDate())){
edad--;
}
}
我已经翻译了原始问题的性别和用户类型相关内容的名称。性别为“genero”，用户类型为“tipoUsuario”
你可以忽略“llenartablausuario”函数，它有其他用途
最佳答案
您的问题出在 document.querySelector('input[name="rbtGender"]:checked') 上，当未检查任何内容时，它会返回 null 。
为了避免差异，您可以这样做 -
sGender = document.querySelector('input[name="rbtGender"]:checked') ? document.querySelector('input[name="rbtGender"]:checked').value : '';
sUserType = document.querySelector('input[name="rbtUserType"]:checked') ? document.querySelector('input[name="rbtUserType"]:checked').value: '';
如果没有将 '' 分配给 sGender 或 sUserType，我将检查该复选框是否包含任何值。
关于javascript - 如何在 javascript 中获取具有 3 个选项的输入单选按钮的值？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/45900364/