Question

我有这个进度条工作。我遇到的唯一问题是在检查了多个复选框时更改颜色...

0-3 background = red
4-7 = yellow
8-10 = Green

我的CSS

.progress-bar-wrapper .progress-bar-filling {
height: 100%;
color: #fff;
text-align: right;
width: 0;
background-color: #39b54a;
border-radius:20px;
}

.progress-bar-wrapper .progress-bar-percent {
font-weight: 400;
font-family: sans-serif;
color: #626162;
padding-top: 6px;
display: block;
}

我的HTML / Javascript

<div id="yyy">
<input type="checkbox" class="check_id" onclick="xxx()" checked>
<input type="checkbox" class="check_id" onclick="xxx()">
<input type="checkbox" class="check_id" onclick="xxx()">
<input type="checkbox" class="check_id" onclick="xxx()" checked>
<input type="checkbox" class="check_id" onclick="xxx()">
<input type="checkbox" class="check_id" onclick="xxx()" checked>
<input type="checkbox" class="check_id" onclick="xxx()">
<input type="checkbox" class="check_id" onclick="xxx()">
<input type="checkbox" class="check_id" onclick="xxx()" checked>
<input type="checkbox" class="check_id" onclick="xxx()">
<div>
<script>

window.onload = xxx;


function xxx()
{
var zzz = $(".check_id:checked").length;
document.getElementById("insert").innerHTML = zzz


$(document).ready(function(){
function progress(percent, $element) {
var progressBarWidth = percent * $element.width() / 100;
$element.find('.progress-bar-filling').animate({ width: progressBarWidth }, 300)

jFiddle在这里Jfiddle 感谢

Answer 1

由于您已经知道:checked复选框的数量，您可以添加3个新类（在您的css中）来设置进度条的背景颜色：

.progress-bar-wrapper .progress-bar-filling.fill0 {
  background-color: red;
}
.progress-bar-wrapper .progress-bar-filling.fill1 {
  background-color: yellow;
}
.progress-bar-wrapper .progress-bar-filling.fill2 {
  background-color: #39b54a;
}

在javascript代码中 - 首先删除所有fill0,fill1,fill2类，然后根据您拥有的数字添加相关类：

$('.progress-bar-filling').removeClass('fill0 fill1 fill2');
if (zzz <= 3) {
  $('.progress-bar-filling').addClass('fill0')
} else if (zzz <= 7) {
  $('.progress-bar-filling').addClass('fill1')
} else {
  $('.progress-bar-filling').addClass('fill2')
}

这是一个有效的例子：
https://jsfiddle.net/g4Lhvawq/

Answer 2

你可以检查一下。通过$(".check_id:checked").length选中复选框并仅更改background-color css属性。

<div id="yyy">
<input type="checkbox" class="check_id" onclick="xxx()" checked>
<input type="checkbox" class="check_id" onclick="xxx()">
<input type="checkbox" class="check_id" onclick="xxx()">
<input type="checkbox" class="check_id" onclick="xxx()" checked>
<input type="checkbox" class="check_id" onclick="xxx()">
<input type="checkbox" class="check_id" onclick="xxx()" checked>
<input type="checkbox" class="check_id" onclick="xxx()">
<input type="checkbox" class="check_id" onclick="xxx()">
<input type="checkbox" class="check_id" onclick="xxx()" checked>
<input type="checkbox" class="check_id" onclick="xxx()">
<div>
<script>

window.onload = xxx;


function xxx()
{
  var zzz = $(".check_id:checked").length;
  document.getElementById("insert").innerHTML = zzz


    $(document).ready(function(){
    function progress(percent, $element) {
      var progressBarWidth = percent * $element.width() / 100;
      $element.find('.progress-bar-filling').animate({ width: progressBarWidth }, 300)
      //.html(percent + "%&nbsp;");

      $('.progress-bar-percent').html( percent + "%&nbsp;" );

      // calculate color
      if($(".check_id:checked").length <= 3)
      {
         $("#progress-bar-filling").css("background-color","red");
      }
      else if($(".check_id:checked").length >= 4 && $(".check_id:checked").length <= 7 )
      {
          $("#progress-bar-filling").css("background-color","yellow");
      }      
      else if($(".check_id:checked").length >= 8 &&    $(".check_id:checked").length <= 10 )
      {
          $("#progress-bar-filling").css("background-color","green");
      }
  }

  var complete = zzz+'0';
  progress(complete, $('#progress-bar'));
})
}




</script>
<p id="insert"></p>

<div class="progress-bar-wrapper">
  <div id="progress-bar">
    <div id="progress-bar-filling" class="progress-bar-filling"></div>
  </div>
     <div class="progress-bar-percent"></div>
 </div>

示例：https://jsfiddle.net/tLq07L77/1/

javascript动态更改背景

2 个答案: