Обновление индикатора выполнения Javascript с помощью флажков?

function update() {
   var checked = 0;
   var myBar = document.getElementById("myBar");
   //Reference the Form.
   var fruits = document.getElementById("fruits");
 
   //Reference all the CheckBoxes in Table.
   var chks = fruits.getElementsByTagName("INPUT");


 
   //Loop and count the number of checked CheckBoxes.
   for (var i = 0; i < chks.length; i++) {
        if (chks[i].checked) {
                checked++;
      }
   }
   if (checked > 0) {
     alert(((checked / 5) * 100) + " % of CheckBoxe(s) are checked.");
        return true;
   } else {
         alert("Please select CheckBoxe(s).");
           return false;
   }
}

h1 {
  text-align: center;
}

#myProgress {
  margin: auto;
  width: 50%;
  background-color: black;
}

#myBar {
  width: 0%;
  height: 30px;
  background-color: green;
}

.buttonHold {
  text-align: center;
}

<html>
<head>
<link rel = "stylesheet" href = "style/pogbar.css">
<script src = "java/progress.js"></script>
</head>

<body>


<div id = "myProgress">
  <div id = "myBar"></div>
</div>
<br>

<div class = "buttonHold">
<input type = "button" value = "Update" onclick = "update()" />
</div>

<form id = "fruits">
<input id = "chkMango" type = "checkbox" value = "1"/><label for = "chkMango">Mango</label>
<input id = "chkApple" type = "checkbox" value = "2"/><label for = "chkApple">Apple</label>
<input id = "chkBanana" type = "checkbox" value = "3"/><label for = "chkBanana">Banana</label>
<input id = "chkGuava" type = "checkbox" value = "4"/><label for = "chkGuava">Guava</label>
<input id = "chkOrange" type = "checkbox" value = "5"/><label for = "chkOrange">Orange</label>
</form>


</body>
</html>

Я создаю веб-сайт и хочу включить флажки и индикатор выполнения, используя css и javascript. Я все еще новичок и ищу помощи. Я хочу использовать чистый javascript для обновления индикатора выполнения в зависимости от того, сколько флажков установлено. Я могу получить код, чтобы предупредить меня <https://jsfiddle.net/Knibber4/wyv2sr0q/3/> Но я не могу понять, как получить код для обновления/заполнения индикатора выполнения. Любая помощь будет оценена по достоинству!

javascript

14.12.2020 23:54

Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией

В JavaScript одним из самых запутанных понятий является поведение ключевого слова "this" в стрелочной и обычной функциях.

Концепция локализации и ее применение в приложениях React ⚡️

Локализация - это процесс адаптации приложения к различным языкам и культурным требованиям. Это позволяет пользователям получить опыт, соответствующий...

Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer

В настоящее время производительность загрузки веб-сайта имеет решающее значение не только для удобства пользователей, но и для ранжирования в...

Безумие обратных вызовов в javascript [JS]

Здравствуйте! Юный падаван 🚀. Присоединяйся ко мне, чтобы разобраться в одной из самых запутанных концепций, когда вы начинаете изучать мир...

Система управления парковками с использованием HTML, CSS и JavaScript

Веб-сайт по управлению парковками был создан с использованием HTML, CSS и JavaScript. Это простой сайт, ничего вычурного. Основная цель -...

JavaScript Вопросы с множественным выбором и ответы

Если вы ищете платформу, которая предоставляет вам бесплатный тест JavaScript MCQ (Multiple Choice Questions With Answers) для оценки ваших знаний,...

842

Перейти к ответу Данный вопрос помечен как решенный

Ответы 1

Ответ принят как подходящий

Вместо предупреждения вы просто используете myBar.style.width = ((checked / 5) * 100) + "%";

Также вместо цикла вы можете просто получить длину в querySelectorAll

function update() {
  var checked = 0;
  var myBar = document.getElementById("myBar");
  //Reference the Form.
  var fruits = document.getElementById("fruits");

  //Reference all the CheckBoxes in Table.
  boxes = fruits.querySelectorAll("input[type='checkbox']:checked");
  checked = boxes.length


myBar.style.width = ((checked / 5) * 100) + "%";
  if (checked == 0) {
    alert("Please select CheckBoxe(s).");
  }
return true;
}

checks = document.querySelectorAll("input[type='checkbox']");
checks.forEach(function(box) {
  box.addEventListener("change", function(e) {
      update()
  });
});

h1 {
  text-align: center;
}

#myProgress {
  margin: auto;
  width: 50%;
  background-color: black;
}

#myBar {
  width: 0%;
  height: 30px;
  background-color: green;
}

.buttonHold {
  text-align: center;
}

<html>

<head>
  <link rel = "stylesheet" href = "style/pogbar.css">
  <script src = "java/progress.js"></script>
</head>

<body>


  <div id = "myProgress">
    <div id = "myBar"></div>
  </div>
  <br>

  <div class = "buttonHold">
    <input type = "button" value = "Update" onclick = "update()" />
  </div>

  <form id = "fruits">
    <input id = "chkMango" type = "checkbox" value = "1" /><label for = "chkMango">Mango</label>
    <input id = "chkApple" type = "checkbox" value = "2" /><label for = "chkApple">Apple</label>
    <input id = "chkBanana" type = "checkbox" value = "3" /><label for = "chkBanana">Banana</label>
    <input id = "chkGuava" type = "checkbox" value = "4" /><label for = "chkGuava">Guava</label>
    <input id = "chkOrange" type = "checkbox" value = "5" /><label for = "chkOrange">Orange</label>
  </form>


</body>

</html>

Чтобы сделать его немного более интуитивным .. Всегда можно добавить onclick = "update();" ко всем флажкам - тогда нет необходимости в кнопке обновления.

— 15.12.2020 00:01

@Zak Я обновил перед вашим ответом, чтобы включить обработчик событий change вместо встроенного клика.

— 15.12.2020 00:02

14.12.2020 23:57