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

我有一个有5个字段的表单

    <form>
   First name: <input type="text" name="firstname" required><br>
   Last name: <input type="text" name="lastname" required>
   Age: <input type="text" name="age" required>
   Gender: <input type="text" name="gender" required>
   City: <input type="text" name="city" required>
   Locality: <input type="text" name="locality">
   Address: <input type="text" name="address">
   </form>

名字：

姓氏：
年龄：
性别：
城市：
地点：
地址:

---

当根据填写的字段数输入表单字段时，我如何显示输入为

完成百分比的字段数，就像我们在一些社交网站中看到的那样。此处只有名字、姓氏、年龄、性别、城市是必填项，即必填项、地点和地址不是必填项，因此必须统计5个字段，如输入2个字段，则必须显示40%已完成，因为5个字段为100%，2个字段占40%
我的想法是使用
元素来显示进度，并通过简单计算完成的
元素数量占
[必需]
元素的百分比来确定进度：


//将“keyup”事件处理程序绑定到[required]输入元素：
$（'input[required]'）。在（'keyup'，function（）上{
//获取[required]输入元素的数量，并添加“required”类：
var required=$（'input[required]'）。addClass（'required'），
//过滤[必需的]输入元素，只保留那些
//使用输入的文本：
已完成=必需。筛选器（函数（）{
返回此.value.trim（）.length>0；
//删除已完成字段的“必需”类：
}).removeClass（“必需”）；
//如果有任何已完成的输入（以防止任何尝试除零）：
如果（已完成，长度）{
//将的值设置为完成输入的百分比：
$（#progress'）.val（（completed.length/required.length）*100）；
}
}).addClass（“必需”）
表单{
宽度：50%；
保证金：0自动；
}
标签{
显示：块；
溢出：隐藏；
保证金：0.3em0；
}
标签输入{
宽度：10em；
浮动：对；
}
输入[必需]{
边框底色：#0c0；
}
输入[必需]。必需{
边框底色：#f00；
}
仪表{
保证金：0.5em0；
宽度：100%；
}

名字：
姓氏：
年龄：
性别：
城市：
地点：
地址:
您只需在HTML中添加一个
或任何内容：

<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>

您还可以将其与一些验证结合起来

请参见此处。
这里是一个基本的非jquery解决方案：


（函数（d、w、未定义）{
d、 querySelector（'form'）。addEventListener（'keyup'，checkDone）；
功能检查完成（e）{
var发起人=e.target | | e.src元素
，nvalue=0
，required=d.querySelectorAll（'input[required]”）
，indicator=d.querySelector（“#百分比”）
，xwidth=0；
[].slice.call（d.querySelectorAll（'input[required]'））.forEach(
函数（el）{nvalue+=el.value.length&&1 | | 0；}
);
xwidth=（（n值/所需长度）*100）；
if（nvalue>0&&xwidthAdd）在
上添加事件处理程序，更改并计算其中填充的字段。
$(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');
    });
});