如何在 Javascript 中添加单选按钮的值

Question

我是一个新手编码器，我一生都无法弄清楚如何为下面的单选按钮添加值 - 任何帮助将不胜感激

我正在尝试创建一个糖尿病筛查评估工具——您可以在其中为不同的风险因素分配不同的值。

Answer 1

您需要使用 JavaScript 来完成此操作。

这是一种方法：

监听表单的submit事件
阻止默认设置（这样表单就不会被发送到服务器）
从每个字段中获取值。 字段使用 HTML 中的name属性
在每个字段上使用parseInt因为它们将是字符串
把它们加起来
显示结果（在本例中，在控制台中）

 const form = document.querySelector('form') form.addEventListener('submit', event => { event.preventDefault() const total = parseInt(form.age.value) + parseInt(form.bmi.value) + parseInt(form.famhistory.value) + parseInt(form.diet.value) console.log(total) })

 <.doctype html> <html lang="en"> <head> <meta charset="utf-8"> <title>Zedland Health Authority's Diabetes health assessment tool</title> <link rel="stylesheet" type="text/css" href="fma.css"> <script src="fma?js"></script> </head> <body> <h1 id="pageheading">Zedland Health Authority's Diabetes health assessment tool</h1> <form id="register"> <fieldset id="controls"> <div> <label class="button" for="Age">How old are you?</label> <input type="radio" id="agerange" name="age" value="0" checked="checked"> <label for="agerange1">1-25</label> <input type="radio" id="agerange" name="age" value="5"> <label for="agerange2">26-40</label> <input type="radio" id="agerange" name="age" value="8"> <label for="agerange3">40-60</label> <input type="radio" id="agerange" name="age" value="10"> <label for="agerange4">60+</label> </div> <div> <label class="button" for="bmi">What is your BMI?</label> <input type="radio" id="bmi" name="bmi" value="0" checked="checked"> <label for="bmi1">0-25</label> <input type="radio" id="bmi" name="bmi" value="0"> <label for="bmi2">26-30</label> <input type="radio" id="bmi" name="bmi" value="9"> <label for="bmi3">31-35</label> <input type="radio" id="bmi" name="bmi" value="10"> <label for="bmi4">35+</label> </div> <div> <label class="button" for="famhistory">Does anybody in your family have diabetes?</label> <input type="radio" id="famhistory" name="famhistory" value="0" checked="checked"> <label for="famhistory1">No</label> <input type="radio" id="famhistory" name="famhistory" value="7"> <label for="famhistory2">Grandparent</label> <input type="radio" id="famhistory" name="famhistory" <label for="famhistory3">Sibling</label> <input type="radio" id="famhistory" name="famhistory" value="15"> <label for="famhistory4">Parent</label> </div> <div> <label class="button" for="diet">How would you describe your diet </label> <input type="radio" id="diet" name="diet" value="0" checked="checked"> <label for="diet1">Low sugar</label> <input type="radio" id="diet" name="diet" value="7"> <label for="diet2">Normal sugar</label> <input type="radio" id="diet" name="diet" value="15"> <label for="diet3">Quite high sugar</label> <input type="radio" id="diet" name="diet" value="15"> <label for="diet4">High sugar</label> </div> </fieldset> <div> <input type="submit" value="submit" id="submit"> </div> </form> </body> </html>

Answer 2

如果您计划增加价值，这里有一个更灵活的方法。

这个想法是遍历每个相关的输入（那些在你的字段集中带有 ID controls的输入），不管它的名字是什么，这样如果你添加更多的检查，相同的代码仍然可以工作。

创建一个score变量，并使用检查的每个输入的值对其进行递增。

请注意，您的 BMI 检查值为 0 TWICE

 window.addEventListener('DOMContentLoaded', function() { var form = document.querySelector('form'); form.addEventListener('submit', function(event) { event.preventDefault(); var inputs = document.querySelectorAll('#controls input'); var score = 0; inputs.forEach(function(input) { if (input.checked) { score += parseInt(input.value, 10); } }); console.log(score); }); });

 <?doctype html> <html lang="en"> <head> <meta charset="utf-8"> <title>Zedland Health Authority's Diabetes health assessment tool</title> <script> </script> </head> <body> <h1 id="pageheading">Zedland Health Authority's Diabetes health assessment tool</h1> <form id="register"> <fieldset id="controls"> <div> <label class="button" for="Age">How old are you?</label> <input type="radio" id="agerange" name="age" value="0" checked="checked"> <label for="agerange1">1-25</label> <input type="radio" id="agerange" name="age" value="5"> <label for="agerange2">26-40</label> <input type="radio" id="agerange" name="age" value="8"> <label for="agerange3">40-60</label> <input type="radio" id="agerange" name="age" value="10"> <label for="agerange4">60+</label> </div> <div> <label class="button" for="bmi">What is your BMI?</label> <input type="radio" id="bmi" name="bmi" value="0" checked="checked"> <label for="bmi1">0-25</label> <input type="radio" id="bmi" name="bmi" value="0"> <label for="bmi2">26-30</label> <input type="radio" id="bmi" name="bmi" value="9"> <label for="bmi3">31-35</label> <input type="radio" id="bmi" name="bmi" value="10"> <label for="bmi4">35+</label> </div> <div> <label class="button" for="famhistory">Does anybody in your family have diabetes?</label> <input type="radio" id="famhistory" name="famhistory" value="0" checked="checked"> <label for="famhistory1">No</label> <input type="radio" id="famhistory" name="famhistory" value="7"> <label for="famhistory2">Grandparent</label> <input type="radio" id="famhistory" name="famhistory" <label for="famhistory3">Sibling</label> <input type="radio" id="famhistory" name="famhistory" value="15"> <label for="famhistory4">Parent</label> </div> <div> <label class="button" for="diet">How would you describe your diet </label> <input type="radio" id="diet" name="diet" value="0" checked="checked"> <label for="diet1">Low sugar</label> <input type="radio" id="diet" name="diet" value="7"> <label for="diet2">Normal sugar</label> <input type="radio" id="diet" name="diet" value="15"> <label for="diet3">Quite high sugar</label> <input type="radio" id="diet" name="diet" value="15"> <label for="diet4">High sugar</label> </div> </fieldset> <div> <input type="submit" value="submit"> </div> </form> </body> </html>

如何在 Javascript 中添加单选按钮的值

问题描述

2 个解决方案

解决方案1
0 2017-12-18 22:32:18

解决方案2
0 2017-12-18 22:42:01

如何在 Javascript 中添加单选按钮的值

问题描述

2 个解决方案

解决方案1 0 2017-12-18 22:32:18

解决方案2 0 2017-12-18 22:42:01

解决方案1
0 2017-12-18 22:32:18

解决方案2
0 2017-12-18 22:42:01