根据jquery中填写的字段数计算并自动更新百分比

您可以简单地在HTML:中添加<p>或其他内容

<form>
   First name: <input type="text" name="firstname" required="required"><br>
   Last name: <input type="text" name="lastname" required="required">
   Age: <input type="text" name="age" required="required">
   Gender: <input type="text" name="gender" required="required">
   City: <input type="text" name="city" required="required">
   Locality: <input type="text" name="locality">
   Address: <input type="text" name="address">
</form>
<p id='percentage'>0% completed</p>

在js文件中，每次更改输入字段时，都要计算所需字段和已填充的所需字段，以获得实际百分比。如果添加了必填字段，则不必更改js文件中的任何内容。

$(document).ready(function(){
    $('input').on('change', function(){
        var cntreq = 0;
        var cntvals = 0;
        $('input').each(function(i, val) {
            if($(this).attr('required') == 'required') {
                cntreq++;
                if($(this).val() != '') {
                    cntvals++;
                }
            }
        });
        var count = (cntvals/cntreq)*100;
        $('#percentage').empty();
        $('#percentage').append(count+'% completed');
    });
});

您也可以将其与一些验证相结合。

看这里的小提琴。

我对此的看法是使用<meter>元素来显示进度，并通过简单地计算出已完成的<input />元素的数量占[required]元素的百分比来确定进度：

// bind a 'keyup' event-handler to the [required] input elements:
$('input[required]').on('keyup', function() {
  // get the number of [required] input elements, and add the 'required' class:
  var required = $('input[required]').addClass('required'),
  // filter the [required] input elements, keeping only those
  // with entered text:
    completed = required.filter(function() {
      return this.value.trim().length > 0;
    // remove the 'required' class for completed fields:
    }).removeClass('required');
 
  // if there are any completed inputs (to prevent any attempts to divide zero):
  if (completed.length) {
    // set the value of the <meter> to the percentage of completed inputs:
    $('#progress').val((completed.length / required.length) * 100);
  }
}).addClass('required');

form {
  width: 50%;
  margin: 0 auto;
}
label {
  display: block;
  overflow: hidden;
  margin: 0 0 0.3em 0;
}
label input {
  width: 10em;
  float: right;
}
input[required] {
  border-bottom-color: #0c0;
}
input[required].required {
  border-bottom-color: #f00;
}
meter {
  margin: 0.5em 0;
  width: 100%;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form>
  <label>First name:
    <input type="text" name="firstname" required>
  </label>
  <label>Last name:
    <input type="text" name="lastname" required>
  </label>
  <label>
    Age:
    <input type="text" name="age" required>
  </label>
  <label>Gender:
    <input type="text" name="gender" required>
  </label>
  <label>City:
    <input type="text" name="city" required>
  </label>
  <label>Locality:
    <input type="text" name="locality">
  </label>
  <label>Address:
    <input type="text" name="address">
  </label>
  <meter id="progress" min="0" max="100" value="0" />
</form>

参考文献：

• HTML:
  • <meter>
• jQuery：
  • addClass()
  • filter()
  • on()
  • CCD_ 10
  • CCD_ 11

这里有一个基本的非jquery解决方案：

(function(d, w, undefined) {
  
  d.querySelector('form').addEventListener('keyup', checkDone);
  
  function checkDone(e) {
    var originator = e.target || e.srcElement
       ,nvalue = 0
       ,required = d.querySelectorAll('input[required]')
       ,indicator = d.querySelector('#percentage')
       ,xwidth = 0;
    [].slice.call(d.querySelectorAll('input[required]')).forEach(
      function (el) { nvalue += el.value.length && 1 || 0; }
    );
    xwidth = ( (nvalue/required.length) * 100 );
    if (nvalue > 0 && xwidth<=100) {
      indicator.style.visibility = 'visible';
      indicator.style.width = xwidth + '%';
      indicator.setAttribute('data-percDone', xwidth + '% done');
    }
  }
  
}(document, window))

#percentage {
  background-color: green;
  color: white;
  height: 1.5em;
  line-height: 1.5em;
  padding-left: 1em;
  visibility: hidden;
}
.indicator {
  width: 300px;
}
#percentage:before {
  content: attr(data-percDone);
}

<form>
   First name: <input type="text" name="firstname" required><br>
   Last name: <input type="text" name="lastname" required><br>
   Age: <input type="text" name="age" required><br>
   Gender: <input type="text" name="gender" required><br>
   City: <input type="text" name="city" required><br>
   Locality: <input type="text" name="locality"><br>
   Address: <input type="text" name="address">
   </form>
   <div class="indicator">
    <div id="percentage" data-percDone="0%"><div>
   </div>