形式与进度条

Question

使用进度条获取下面的表单。除了单选按钮外，一切正常。我需要在填写每个表单字段值后更改填充表单的百分比。

<form accept-charset="UTF-8" action="#" class="pro-form" id="pro-form" method="post">

      <h1>Progress Form</h1>       
   <progress max="100" value="0" id="progress" class="bar"> </progress>
    <div class="progress-message" id="progress-message" >progress </div>


           <input type="radio" name="value1" required="required" value="yes">
           <input type="radio" name="value1" required="required" value="no">
          <input id="card_name" required="required" type="text">
          <input id="card_address_1" required="required" type="text">
          <input id="card_zip" maxlength="10"  required="required" type="text">


          <input name="commit" type="submit" value="ok" class="button">


      </form>

如何处理单选按钮？为什么JQuery keyup功能不会改变 单击它们时的进度消息？

 <script>
    $("#pro-form input[required]").keyup(function() {

    var numValid = 0;
    $("#pro-form input[required]").each(function() {
        if (this.validity.valid) {
            numValid++;
        }
    });

    var progress = $("#progress"),
        progressMessage = $("#progress-message");

    if (numValid == 0) {
        progress.attr("value", "0");
        progressMessage.text(" 0%");
    }
    if (numValid == 1) {
        progress.attr("value", "20");
        progressMessage.text(" 20%");
    }
    if (numValid == 2) {
        progress.attr("value", "40");
        progressMessage.text(" 40%");
    }
    if (numValid == 3) {
        progress.attr("value", "60");
        progressMessage.text(" 60%");
    }
    if (numValid == 4) {
        progress.attr("value", "80");
        progressMessage.text(" 80%");
    }
    if (numValid == 5) {
        progress.attr("value", "95");
        progressMessage.text(" 90%");
    }

    });
    </script>

Answer 1

我创建了一个包含更新进度条形码的函数，然后我为单选按钮正确分配了更改功能。评论您是否正在寻找其他内容。

＆＃13;

＆＃13;

$("[name=value1]").change(buildProgress);
$("#pro-form input[required]").keyup(buildProgress);



function buildProgress() {
    var numValid = 0;
    $("#pro-form input[required]").each(function() {
        if (this.validity.valid) {
            numValid++;
        }
    });
    if ($("[name=value1]:checked").length) {
        numValid++;
    }

    var progress = $("#progress"),
        progressMessage = $("#progress-message");

    if (numValid == 0) {
        progress.attr("value", "0");
        progressMessage.text(" 0%");
    }
    if (numValid == 1) {
        progress.attr("value", "20");
        progressMessage.text(" 20%");
    }
    if (numValid == 2) {
        progress.attr("value", "40");
        progressMessage.text(" 40%");
    }
    if (numValid == 3) {
        progress.attr("value", "60");
        progressMessage.text(" 60%");
    }
    if (numValid == 4) {
        progress.attr("value", "80");
        progressMessage.text(" 80%");
    }
    if (numValid == 5) {
        progress.attr("value", "95");
        progressMessage.text(" 90%");
    }
}

＆＃13;

input[type=text] {
  border:1px solid black;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form accept-charset="UTF-8" action="#" class="pro-form" id="pro-form" method="post">

      <h1>Progress Form</h1>       
   <progress max="100" value="0" id="progress" class="bar"> </progress>
    <div class="progress-message" id="progress-message" >progress </div>


           <input type="radio" name="value1" required="required" value="yes">
           <input type="radio" name="value1" required="required" value="no">
          <input id="card_name" required="required" type="text">
          <input id="card_address_1" required="required" type="text">
          <input id="card_zip" maxlength="10"  required="required" type="text">


          <input name="commit" type="submit" value="ok" class="button">


      </form>

＆＃13;

＆＃13;

＆＃13;