汇总 javascript 中所选单选按钮的值
Summarize values of selected radio buttons in javascript
我有一个 html 表单，其中包含三组单选按钮，selector、selector2 和 selector3。我正在尝试添加所选单选按钮的值，但是失败了。如何添加下面 alert 中的所有值？为什么它不起作用？我尝试了不同的方式，但我可以添加值，只需在控制台中获取它们即可。
<script>
const form = document.querySelector('form');
form.addEventListener('submit', obtenerTotal);
function obtenerTotal(event) {
event.preventDefault();
const formData = new FormData(event.target);
const selector = parseInt(formData.get('selector') || '0', 10);
const selector2 = parseInt(formData.get('selector2') || '0', 10);
const selector3 = parseInt(formData.get('selector3') || '0', 10);
const result = selector + selector2 + selector3;
alert("the value is:" + result);
}
</script>
我的表格：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="style.css">
<link href="https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500&display=swap" rel="stylesheet">
<title>Ob Calculator</title>
<script src="main.js"></script>
</head>
<body>
<div class="alert">
<h2>Hey! Read Me...</h2>
<p></p>
</div>
<div class="container">
<form>
<h2>Ocular</h2>
<ul>
<li>
<input type="radio" id="a-option" class="radi" name="selector" value="4">
<label for="a-option">Espontanea</label>
<div class="check"></div>
</li>
<li>
<input type="radio" id="b-option" class="radi" name="selector" value="3">
<label for="b-option">Orden Verbal</label>
<div class="check"><div class="inside"></div></div>
</li>
<li>
<input type="radio" id="c-option" class="radi" name="selector" value="2">
<label for="c-option">Dolor</label>
<div class="check"><div class="inside"></div></div>
</li>
<li>
<input type="radio" id="d-option" class="radi" name="selector" value="1">
<label for="d-option"><a href="#verbal">No Responde</a></label>
<div class="check"><div class="inside"></div></div>
</li>
</ul>
</div>
<div class="container">
<h2 id="verbal">Verbal</h2>
<ul>
<li>
<input type="radio" id="e-option" name="selector2" value="5" >
<label for="e-option">Orientado y conversando</label>
<div class="check"></div>
</li>
<li>
<input type="radio" id="f-option" class="radi" name="selector2" value="4" >
<label for="f-option">Desorientado y hablando</label>
<div class="check"><div class="inside"></div></div>
</li>
<li>
<input type="radio" id="h-option" class="radi" name="selector2" value="3" >
<label for="h-option">Palabras inapropiadas</label>
<div class="check"><div class="inside"></div></div>
</li>
<li>
<input type="radio" id="i-option" class="radi" name="selector2" value="2" >
<label for="i-option">Sonidos Incomprensibles</label>
<div class="check"><div class="inside"></div></div>
</li>
<li>
<input type="radio" id="j-option" class="radi" name="selector2" value="1" >
<label for="j-option">Ninguna respuesta</label>
<div class="check"><div class="inside"></div></div>
</li>
</ul>
</div>
<div class="container">
<h2 id="verbal">Motora</h2>
<ul>
<li>
<input type="radio" id="k-option" class="radi" name="selector3" value="6" >
<label for="k-option">Orden verbal obedece</label>
<div class="check"></div>
</li>
<li>
<input type="radio" id="l-option" class="radi" name="selector3" value="5" >
<label for="l-option">Localiza el dolor</label>
<div class="check"><div class="inside"></div></div>
</li>
<li>
<input type="radio" id="m-option" class="radi" name="selector3" value="4" >
<label for="m-option">Retirada y flexion</label>
<div class="check"><div class="inside"></div></div>
</li>
<li>
<input type="radio" id="o-option" class="radi" name="selector3" value="3" >
<label for="o-option">Flexion Anormal</label>
<div class="check"><div class="inside"></div></div>
</li>
<li>
<input type="radio" id="p-option" name="selector3" value="2" >
<label for="p-option">Extension</label>
<div class="check"><div class="inside"></div></div>
</li>
<li>
<input type="radio" id="r-option" class="radi" name="selector3" value="1" >
<label for="r-option">Ninguna respuesta</label>
<div class="check"><div class="inside"></div></div>
</li>
</ul>
<button>Obtener TOTAL</button>
</form>
</div>
<div class="signature">
<p></a></p>
</div>
<script><!-- javascript from above... --></script>
</body>
</html>
你的意思是这样的吗？
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="style.css">
<link href="https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500&display=swap" rel="stylesheet">
<title>Ob Calculator</title>
<script src="main.js"></script>
</head>
<body>
<div class="alert">
<h2>Hey! Read Me...</h2>
<p></p>
</div>
<div class="container">
<form>
<h2>Ocular</h2>
<ul>
<li>
<input type="radio" id="a-option" class="radi" name="selector" value="4">
<label for="a-option">Espontanea</label>
<div class="check"></div>
</li>
<li>
<input type="radio" id="b-option" class="radi" name="selector" value="3">
<label for="b-option">Orden Verbal</label>
<div class="check"><div class="inside"></div></div>
</li>
<li>
<input type="radio" id="c-option" class="radi" name="selector" value="2">
<label for="c-option">Dolor</label>
<div class="check"><div class="inside"></div></div>
</li>
<li>
<input type="radio" id="d-option" class="radi" name="selector" value="1">
<label for="d-option"><a href="#verbal">No Responde</a></label>
<div class="check"><div class="inside"></div></div>
</li>
</ul>
</div>
<div class="container">
<h2 id="verbal">Verbal</h2>
<ul>
<li>
<input type="radio" id="e-option" name="selector2" value="5" >
<label for="e-option">Orientado y conversando</label>
<div class="check"></div>
</li>
<li>
<input type="radio" id="f-option" class="radi" name="selector2" value="4" >
<label for="f-option">Desorientado y hablando</label>
<div class="check"><div class="inside"></div></div>
</li>
<li>
<input type="radio" id="h-option" class="radi" name="selector2" value="3" >
<label for="h-option">Palabras inapropiadas</label>
<div class="check"><div class="inside"></div></div>
</li>
<li>
<input type="radio" id="i-option" class="radi" name="selector2" value="2" >
<label for="i-option">Sonidos Incomprensibles</label>
<div class="check"><div class="inside"></div></div>
</li>
<li>
<input type="radio" id="j-option" class="radi" name="selector2" value="1" >
<label for="j-option">Ninguna respuesta</label>
<div class="check"><div class="inside"></div></div>
</li>
</ul>
</div>
<div class="container">
<h2 id="verbal">Motora</h2>
<ul>
<li>
<input type="radio" id="k-option" class="radi" name="selector3" value="6" >
<label for="k-option">Orden verbal obedece</label>
<div class="check"></div>
</li>
<li>
<input type="radio" id="l-option" class="radi" name="selector3" value="5" >
<label for="l-option">Localiza el dolor</label>
<div class="check"><div class="inside"></div></div>
</li>
<li>
<input type="radio" id="m-option" class="radi" name="selector3" value="4" >
<label for="m-option">Retirada y flexion</label>
<div class="check"><div class="inside"></div></div>
</li>
<li>
<input type="radio" id="o-option" class="radi" name="selector3" value="3" >
<label for="o-option">Flexion Anormal</label>
<div class="check"><div class="inside"></div></div>
</li>
<li>
<input type="radio" id="p-option" name="selector3" value="2" >
<label for="p-option">Extension</label>
<div class="check"><div class="inside"></div></div>
</li>
<li>
<input type="radio" id="r-option" class="radi" name="selector3" value="1" >
<label for="r-option">Ninguna respuesta</label>
<div class="check"><div class="inside"></div></div>
</li>
</ul>
<button>Obtener TOTAL</button>
</form>
</div>
<div class="signature">
<p></a></p>
</div>
<script>
const form = document.querySelector('form');
form.addEventListener('submit', obtenerTotal);
function obtenerTotal(event) {
event.preventDefault();
const formData = new FormData(event.target);
const selector = parseInt(formData.get('selector') || '0', 10);
const selector2 = parseInt(formData.get('selector2') || '0', 10);
const selector3 = parseInt(formData.get('selector3') || '0', 10);
const result = selector + selector2 + selector3;
alert(`Ocular: ${selector}\nVerbal: ${selector2}\nMotora: ${selector3}\nThe value is : ` + result);
}
</script>
</body>
</html>
您只需在第 143 行的按钮标签上添加 type="submit"。
<button type="submit">Obtener TOTAL</button>
下面的沙盒：
https://codesandbox.io/s/festive-mclaren-bbxv4?fontsize=14&hidenavigation=1&theme=dark
我有一个 html 表单，其中包含三组单选按钮，selector、selector2 和 selector3。我正在尝试添加所选单选按钮的值，但是失败了。如何添加下面 alert 中的所有值？为什么它不起作用？我尝试了不同的方式，但我可以添加值，只需在控制台中获取它们即可。
<script>
const form = document.querySelector('form');
form.addEventListener('submit', obtenerTotal);
function obtenerTotal(event) {
event.preventDefault();
const formData = new FormData(event.target);
const selector = parseInt(formData.get('selector') || '0', 10);
const selector2 = parseInt(formData.get('selector2') || '0', 10);
const selector3 = parseInt(formData.get('selector3') || '0', 10);
const result = selector + selector2 + selector3;
alert("the value is:" + result);
}
</script>
我的表格：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="style.css">
<link href="https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500&display=swap" rel="stylesheet">
<title>Ob Calculator</title>
<script src="main.js"></script>
</head>
<body>
<div class="alert">
<h2>Hey! Read Me...</h2>
<p></p>
</div>
<div class="container">
<form>
<h2>Ocular</h2>
<ul>
<li>
<input type="radio" id="a-option" class="radi" name="selector" value="4">
<label for="a-option">Espontanea</label>
<div class="check"></div>
</li>
<li>
<input type="radio" id="b-option" class="radi" name="selector" value="3">
<label for="b-option">Orden Verbal</label>
<div class="check"><div class="inside"></div></div>
</li>
<li>
<input type="radio" id="c-option" class="radi" name="selector" value="2">
<label for="c-option">Dolor</label>
<div class="check"><div class="inside"></div></div>
</li>
<li>
<input type="radio" id="d-option" class="radi" name="selector" value="1">
<label for="d-option"><a href="#verbal">No Responde</a></label>
<div class="check"><div class="inside"></div></div>
</li>
</ul>
</div>
<div class="container">
<h2 id="verbal">Verbal</h2>
<ul>
<li>
<input type="radio" id="e-option" name="selector2" value="5" >
<label for="e-option">Orientado y conversando</label>
<div class="check"></div>
</li>
<li>
<input type="radio" id="f-option" class="radi" name="selector2" value="4" >
<label for="f-option">Desorientado y hablando</label>
<div class="check"><div class="inside"></div></div>
</li>
<li>
<input type="radio" id="h-option" class="radi" name="selector2" value="3" >
<label for="h-option">Palabras inapropiadas</label>
<div class="check"><div class="inside"></div></div>
</li>
<li>
<input type="radio" id="i-option" class="radi" name="selector2" value="2" >
<label for="i-option">Sonidos Incomprensibles</label>
<div class="check"><div class="inside"></div></div>
</li>
<li>
<input type="radio" id="j-option" class="radi" name="selector2" value="1" >
<label for="j-option">Ninguna respuesta</label>
<div class="check"><div class="inside"></div></div>
</li>
</ul>
</div>
<div class="container">
<h2 id="verbal">Motora</h2>
<ul>
<li>
<input type="radio" id="k-option" class="radi" name="selector3" value="6" >
<label for="k-option">Orden verbal obedece</label>
<div class="check"></div>
</li>
<li>
<input type="radio" id="l-option" class="radi" name="selector3" value="5" >
<label for="l-option">Localiza el dolor</label>
<div class="check"><div class="inside"></div></div>
</li>
<li>
<input type="radio" id="m-option" class="radi" name="selector3" value="4" >
<label for="m-option">Retirada y flexion</label>
<div class="check"><div class="inside"></div></div>
</li>
<li>
<input type="radio" id="o-option" class="radi" name="selector3" value="3" >
<label for="o-option">Flexion Anormal</label>
<div class="check"><div class="inside"></div></div>
</li>
<li>
<input type="radio" id="p-option" name="selector3" value="2" >
<label for="p-option">Extension</label>
<div class="check"><div class="inside"></div></div>
</li>
<li>
<input type="radio" id="r-option" class="radi" name="selector3" value="1" >
<label for="r-option">Ninguna respuesta</label>
<div class="check"><div class="inside"></div></div>
</li>
</ul>
<button>Obtener TOTAL</button>
</form>
</div>
<div class="signature">
<p></a></p>
</div>
<script><!-- javascript from above... --></script>
</body>
</html>
你的意思是这样的吗？
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="style.css">
<link href="https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500&display=swap" rel="stylesheet">
<title>Ob Calculator</title>
<script src="main.js"></script>
</head>
<body>
<div class="alert">
<h2>Hey! Read Me...</h2>
<p></p>
</div>
<div class="container">
<form>
<h2>Ocular</h2>
<ul>
<li>
<input type="radio" id="a-option" class="radi" name="selector" value="4">
<label for="a-option">Espontanea</label>
<div class="check"></div>
</li>
<li>
<input type="radio" id="b-option" class="radi" name="selector" value="3">
<label for="b-option">Orden Verbal</label>
<div class="check"><div class="inside"></div></div>
</li>
<li>
<input type="radio" id="c-option" class="radi" name="selector" value="2">
<label for="c-option">Dolor</label>
<div class="check"><div class="inside"></div></div>
</li>
<li>
<input type="radio" id="d-option" class="radi" name="selector" value="1">
<label for="d-option"><a href="#verbal">No Responde</a></label>
<div class="check"><div class="inside"></div></div>
</li>
</ul>
</div>
<div class="container">
<h2 id="verbal">Verbal</h2>
<ul>
<li>
<input type="radio" id="e-option" name="selector2" value="5" >
<label for="e-option">Orientado y conversando</label>
<div class="check"></div>
</li>
<li>
<input type="radio" id="f-option" class="radi" name="selector2" value="4" >
<label for="f-option">Desorientado y hablando</label>
<div class="check"><div class="inside"></div></div>
</li>
<li>
<input type="radio" id="h-option" class="radi" name="selector2" value="3" >
<label for="h-option">Palabras inapropiadas</label>
<div class="check"><div class="inside"></div></div>
</li>
<li>
<input type="radio" id="i-option" class="radi" name="selector2" value="2" >
<label for="i-option">Sonidos Incomprensibles</label>
<div class="check"><div class="inside"></div></div>
</li>
<li>
<input type="radio" id="j-option" class="radi" name="selector2" value="1" >
<label for="j-option">Ninguna respuesta</label>
<div class="check"><div class="inside"></div></div>
</li>
</ul>
</div>
<div class="container">
<h2 id="verbal">Motora</h2>
<ul>
<li>
<input type="radio" id="k-option" class="radi" name="selector3" value="6" >
<label for="k-option">Orden verbal obedece</label>
<div class="check"></div>
</li>
<li>
<input type="radio" id="l-option" class="radi" name="selector3" value="5" >
<label for="l-option">Localiza el dolor</label>
<div class="check"><div class="inside"></div></div>
</li>
<li>
<input type="radio" id="m-option" class="radi" name="selector3" value="4" >
<label for="m-option">Retirada y flexion</label>
<div class="check"><div class="inside"></div></div>
</li>
<li>
<input type="radio" id="o-option" class="radi" name="selector3" value="3" >
<label for="o-option">Flexion Anormal</label>
<div class="check"><div class="inside"></div></div>
</li>
<li>
<input type="radio" id="p-option" name="selector3" value="2" >
<label for="p-option">Extension</label>
<div class="check"><div class="inside"></div></div>
</li>
<li>
<input type="radio" id="r-option" class="radi" name="selector3" value="1" >
<label for="r-option">Ninguna respuesta</label>
<div class="check"><div class="inside"></div></div>
</li>
</ul>
<button>Obtener TOTAL</button>
</form>
</div>
<div class="signature">
<p></a></p>
</div>
<script>
const form = document.querySelector('form');
form.addEventListener('submit', obtenerTotal);
function obtenerTotal(event) {
event.preventDefault();
const formData = new FormData(event.target);
const selector = parseInt(formData.get('selector') || '0', 10);
const selector2 = parseInt(formData.get('selector2') || '0', 10);
const selector3 = parseInt(formData.get('selector3') || '0', 10);
const result = selector + selector2 + selector3;
alert(`Ocular: ${selector}\nVerbal: ${selector2}\nMotora: ${selector3}\nThe value is : ` + result);
}
</script>
</body>
</html>
您只需在第 143 行的按钮标签上添加 type="submit"。
<button type="submit">Obtener TOTAL</button>
下面的沙盒：
https://codesandbox.io/s/festive-mclaren-bbxv4?fontsize=14&hidenavigation=1&theme=dark