javascript - 我有一组 html 形式的问题

Question

我有一组 html 形式的问题。 其中一些问题的答案在单选按钮中演示，而一些问题的答案则通过复选框显示。

问题是我想计算答案。 例如我有 5 个问题。 其中 3 个是是或否问题(单选按钮)。 其中 2 道是多项选择题(复选框)。 用户回答了 5 个问题中的 4 个问题。 因此，我的计数器将显示 4，然后只有提交按钮可以单击。

<form method="post" action="" id="myForm">


            <p>Name:<br>
                <input type="text" name="Lname" size="50" onKeyPress="return lettersonly(event)" id="lname" value=""required/>

            </p>

            <p>E-mail:<br>
                <input type="text" name="Lemail" size="50" onKeyPress="return emailLetters(event)" value=""required/>
            </p>
            <p>Gender: 
                <input type="radio" name="Lgender" value="female" required>Female

                <input type="radio" name="Lgender" value="male" required>Male

            </p>

            <p>1. What is your special interests? <i><small>you can choose more than one option</small></i><br>
                <input type="checkbox" name="q01[]" value="Circuit Design">Circuit Design<br>
                <input type="checkbox" name="q01[]" value="System Design">System Design<br>
                <input type="checkbox" name="q01[]" value="Logical Circuits">Logical Circuits<br>
                <input type="checkbox" name="q01[]" value="IT-Security">IT-Security<br>
                <input type="checkbox" name="q01[]" value="Embedded System">Embedded System<br>
                <input type="checkbox" name="q01[]" value="Others">Others<br>
            </p>

            <p>2. Have you taught Logic Circuits or other related Subjects to undergraduate students? <br>
                <input type="radio" name="q02" value="Yes" onclick="display(this)" required>Yes
                <input type="radio" name="q02" value="No" onclick="display(this)" required>No
            </p>

            <div id="hideform" style="display:none">
                <p>3. Have you taught VERILOG or other types of Gate Level programming languages to undergraduate students? <br>
                    <input type="radio" name="q03" value="Yes">Yes
                    <input type="radio" name="q03" value="No">No
                </p>

                <p>4. In your opinion, how many of students have some difficulties to cope with the concept of complex combination of Logic Units and implementation of them by a programming language like VERILOG or VHDL? <br>
                    <input type="checkbox" name="q04" value="None of the Students">None of the Students<br>
                    <input type="checkbox" name="q04" value="Small Group of Students">Small Group of Students<br>
                    <input type="checkbox" name="q04" value="Half of the Students">Half of the Students<br>
                    <input type="checkbox" name="q04" value="Majority of the Students">Majority of the Students<br>
                </p>

                <p>5. Do you have enough time to give them enough examples during the face to face classroom? <br>
                    <input type="radio" name="q05" value="Yes">Yes
                    <input type="radio" name="q05" value="No">No
                </p>

            <p><input class= "submitbtn" type="submit"  name="submit" value="Submit" onclick="myFunction()"></p> 
            <!--onclick= "alert('Thanks for your time!')"-->
        </form>

Answer 1

您将需要 jquery ( https://code.jquery.com/ ) 来轻松完成此操作。此外，将 disabled 添加到您的提交按钮，使其不可点击。然后添加自己的 JavaScript 代码:

$(document).ready(function(){
  //check form when page is loaded
  checkform();

  //check form when element is clicked
  $("input[type='radio'][name^='q'],input[type='checkbox'][name^='q']").click(function(){
    checkform();
  });
});

function checkform(){
  counter =0;
  // Count filled form sections
  for(i=1;i<=5;i++){
    if($('input[name="q0'+i+'"],input[name="q0'+i+'[]"]').is(':checked')){             
      counter++;
    }
  }

  // submit form
  if(counter>=4){
    //enable button
    $(".submitbtn").show(); //better use an id for the button
  }
}

确保没有其他以“q”开头的输入元素，否则在您的页面上我建议的代码将不起作用。有几种方法可以做到这一点...