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

问题描述 投票：-1回答：2

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

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

javascript html button radio
2个回答
0
投票

您需要使用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>
0
投票

如果您计划添加值，这是一种更灵活的方法。

我们的想法是循环遍历每个相关输入（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>
最新问题
© www.soinside.com 2019 - 2024. All rights reserved.