进度条表单用jquery填写

我正在尝试创建一个随着表单填写而增加的进度条。 例如，如果我有5个输入。 每个输入都需要填写才能达到100％我的目标是在表单达到100％后激活按钮。

我的思维过程是做一堆如果空白使其值为0但如果没有那么它得到值10或任意数字。

然后我会将这些值加起来以完成进度条。

我不确定如何设置值以便我可以添加它们，或者这甚至是正确的方法。 我不知道该去哪里。 这是代码：

 One
 Two
 Three
 Four
 Five
 
 
 $(function() { $( "#progressbar" ).progressbar({ value: 37 }); }); $(function(){ if ( $('#1').val() == '' ){value == 0}; } else { value == 10; }; if ( $('#2').val() == '' ){value == 0}; } else { value == 10; }; if ( $('#3').val() == '' ){value == 0}; } else { value == 10; }; if ( $('#4').val() == '' ){value == 0}; } else { value == 10; }; if ( $('#5').val() == '' ){value == 0}; } else { value == 10; }; }); 

任何帮助将不胜感激

Answer 1

HTML：

 
 One
 Two
 Three
 Four
 Five
 
 
 

使用Javascript：

 $(function() { $( "#progressbar" ).progressbar({ value: 0 }); $(".moo").change(function() { var pbVal = 0; if ($("#1").val().length > 0) pbVal += 20; if ($("#2").val().length > 0) pbVal += 20; if ($("#3").val().length > 0) pbVal += 20; if ($("#4").val().length > 0) pbVal += 20; if ($("#5").val().length > 0) pbVal += 20; $( "#progressbar" ).progressbar( "option", "value", pbVal ); return false; }); 

}）;

Answer 2

HTML：

 
 One
 Two
 Three
 Four
 Five
 
 
 

使用Javascript：

 $(function() { $( "#progressbar" ).progressbar({ value: 0 }); //Register this function to fire whenever a value changes in one of the input elements $("form input").change(function() { var pbVal = 0; //For each input element, count the value on the data-pbVal element and add it to the total $("form input").each(function(index) { if($(this).val().length > 0) { pbVal += $(this).data('pbVal'); } }); $( "#progressbar" ).progressbar( "option", "value", pbVal ); return false; }); });