Блог

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

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

#javascript

#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/>
Но я не могу понять, как заставить код обновлять / заполнять индикатор выполнения. Любая помощь будет оценена!

Ответ №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>

Комментарии:

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

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